vue自定义指令

自定义指令实现

• 参数1——指令的名称，注意：在定义的时候，指令的名称前面，不需要加 v- 前缀，而在调用的时候，必须在指令名称前 加上 v- 前缀来进行调用
• 参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
• 参数2中涉及到的钩子函数
  1、bind() 一次执行 调用是在指令绑定到元素上的时候执行，这时还没有进行dom插入
  2、insert() 一次执行 调用时在元素插入到dom中的时候会执行此函数
  3、update() 多次执行 调用时在每次vnode更新时
  4、componentUpdate 指令所在的组件的VNode以及其子VNode 全部更新后调用
  5、unbind: 指令和元素解绑的时候调用,只调用一次
• binding对象
  1、name : v-gqs ==> gqs 不包括前面的v-
  2、valule : 指令后面的值 v-gqs='abc' value=abc
  3、oldValue 前一个值,只能在 update & componentUpdate 中使用.
  4、expression : v-gqs='1+1',如果是 value = 2 ,如果是 expression = 1 + 1
  5、arg: 指令传递的参数 ,比如 v-gqs:hello arg = hello
  6、modifiers : 比如 v-gqs.a.b modifiers = {a:true,b:true}

注意：在每个函数中，第一个参数，永远是 el ，表示被绑定了指令的那个元素，这个el参数，是一个原生的JS 对象

全局定义

Vue.directive('focus',{
             bind:function(el,binding){
                // el.style.color = 'red';
                // 和样式相关的操作，一般都可以在 bind 中执行，因为一个指令被绑定的时候，该元素已经存在，可以修改它的样式

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

局部自定义私有指令

directives:{
     'fontweight':{
         bind:function(el,binding){
            el.style.fontWeight = binding.value
          }
      },


      // ** 这个 function 等同于 把 代码写到了 bind 和 update 中去
      'fontsize':function(el,binding){
          el.style.fontSize = parseInt(binding.value) + 'px'
       }
}