person

路由

vue-router 的基本使用

定义组件

var login = {
  template: "<h1>登录组件</h1>"
};

var register = {
  template: "<h1>注册组件</h1>"
};

自定义指令

示例,文本框自动获取焦点

自定义全局指令

使用 Vue.directive() 定义全局指令。

// 注册一个全局自定义指令 `v-focus`,参数一是指令的名称,参数二是一些指令相关的函数,这些函数可以在特定阶段执行相关操作
Vue.directive("focus", {
    // 样式只要通过指令绑定给了元素,不管这个元素有没有插入到页面中去,这个元素就有了一个内联样式,在元素显示到页面的时候将样式应用给这个元素
    bind: function(el){
        el.style.color = 'red'
    }
  // 在函数中,第一个参数是 el,表示被绑定了指令的那个元素,el 是一个原生的 js 对象
  // 当被绑定的元素插入到 DOM 中时……一个元素只有插入 DOM 之后才能获取焦点
  inserted: function(el) {
    // 聚焦元素
    el.focus();
  }
});

和样式有关的一般都可以在 bind 中操作,和 js 行为有关的最好在 inserted 中去执行。

然后你可以在模板中任何元素上使用新的 v-focus 属性,如下:

<input v-focus />

v-cloak、v-text 和 v-html 的使用

v-cloak 的使用

v-cloak 可以解决当网页很慢时,网页在加载的时候会显示 {{ message }} ,等网页加载完毕才显示 {{ message }} 的具体内容,即 v-cloak 和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 {{ message }} 标签直到实例准备完毕。

示例

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>