vue笔记-06（指令-自定义指令 ）

• vue中的所有指令在调用的时候都以“v-”开头
• 定义指令：Vue.directive(name,obj)，

1. 第一个参数是指令的名称。在定义的时候不需要加v-前缀，在调用的时候，必须在指令名称前加v-来进行调用
2. 第二个参数二是一个对象，这个对象身上，有一些指令相关的钩子函数，这些函数可以在特定的阶段，执行相关的操作。在每个钩子函数中第一个参数el表示被绑定了指令的那个元素。el 是一个原生的JS对象。
   (1) bind(el, binding)： 每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
   (2) inserted(el, binding)：表示插入到DOM中的时候，会执行inserted函数
   (3) updated(el, binding)：当VNode更新的时候，会执行updated，可能会触发多次
3. 在元素刚绑定了指令的时候，还没有插入都DOM中去，这时候，调用原生JS对象el的focus方法没有作用
4. 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式。将来元素肯定会显示到页面中，这时候，李兰器的渲染引擎必然会解析样式，应用给这个元素
5. 和JS相关的操作，最好在inserted中去执行，防止JS行为不生效
6. binding钩子函数参数：
   （1）name：指令名，没有v-
   （2）value：指令传递的值
   （3）expression：指令内的表达式
7. 代码示例

  // 自定义全局指令
  Vue.directive('focus', {
    bind: function(el){

    },
    inserted: function(el){
      e.focus()
    },
    updated: function(el){

    }
  })

  // 自定义局部指令
  directives :{
    'fontweight': {
      bind: function(el,binding){
        el.style.fontWeight = binding.value
      }
    },
    'fontsize': function(el, binding){ //指令钩子函数简写，如果只写bind和updated方法，可以简写
      el.style.fontSize = parseInt(binding.value) + 'px'
    }
  }