Vue的学习之路十五：自定义全局指令

// 注意：Vue中所有的指令，在调用的时候，都以 v- 开头
// 使用 Vue.directive() 定义全局的指令
// 其中参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀，
// 但是在调用的时候必须在指令名称前加上 v- 前缀进行调用
// 参数2：是一个对象，这个对象身上，身上有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
Vue.directive('focus', {
  // 注意：在每个函数中第一个参数永远是 el，表示被绑定指令的那个元素，这个 el 参数是一个原生的JS对象
  // 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
  bind: function(el) {
    // 在元素刚绑定指令的时候，还没有插入 DOM 中去，这时候调用 focus 方法没有作用
    // 因为一个元素只有，插入到DOM之后，才能获取焦点
    // el.focus()
  },
  // 元素插入到DOM中的时候，会执行 inserted 函数，只执行一次
  inserted: function(el) {
    el.focus()
  },
  // 当Vnode更新的时候，会执行 updated 函数，可能会触发多次
  updated: function(el) {},
})

// 自定义设置字体颜色的指令
Vue.directive('color', {
  // 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
  // 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
  bind: function(el, binding) {
    // el.style.color = 'red'
    // 和样式相关的操作，一般都可以在 bind 中执行

    el.style.color = binding.value
  },
  inserted: function(el) {
    // 和JS行为有关的操作，最好在 inserted 中去执行，防止JS行为不生效
  },

})

1. Vue中所有的指令，在调用的时候，都以 v- 开头
2. 使用 Vue.directive(参数1， 参数2) 定义全局的指令，

• 参数1：指令的名称，在定义的时候不需要加 v- 前缀
• 参数2：是一个对象，这个对象身上，身上有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作

3. Vue.directive(参数1， 参数2) 中的每个函数中第一个参数永远是 el，表示被绑定指令的那个元素，这个 el 参数是一个原生的JS对象
4. bind：每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
5. inserted：元素插入到DOM中的时候，会执行 inserted 函数，只执行一次
6. updated：当Vnode更新的时候，会执行 updated 函数，可能会触发多次
7. 在上面的例子中，bind里面调用 focus 方法没有作用，原因是在元素刚绑定指令的时候，还没有插入 DOM 中去
8. 和样式相关的操作，一般都可以在 bind 中执行，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式，将来元素要显示到页面中的时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
9. 和JS行为有关的操作，最好在 inserted 中去执行，防止JS行为不生效
10. binding ：一个对象，包含以下 property：

• name：指令名，不包括 v- 前缀。
• value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
• expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。