22. 自定义指令

指令，如v-show ,v-if等等都有各自的功能，然而我们经常会感觉这些指令不够用，所以我们需要自己定义一些指令：

    Vue.directive("click-fang",{
      
        update:function(el,binding,vnode , oldVnode){
          console.log(el,binding,vnode,oldVnode)
          el.style.backgroundColor="red"
        }
      })

var component1={
        data:function(){
          return{
            count:1
          }
        },
        template:`
        <div v-click-fang @click="count++" v-font-fang="count+10" v-height-fang="count" >模板一绑定事件{{count}}</div>
        `
      }

如上是一个简单的指令，作用很简单，就是点击后将背景变成红色。从上面我们可以看到一个钩子函数update，代表组件内容有更新的时候会触发，执行内部代码——

钩子函数

一个指令对象可以提供如下几个钩子：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

一般来说，我们只需要前两个，即bind和update即可。

钩子函数的参数

可以看到钩子函数有四个参数，el,binding,vnode ,oldVnode

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

了解了这些我们就可以写一写指令了：

Vue.directive("click-fang",{
      
        update:function(el,binding,vnode , oldVnode){
          console.log(el,binding,vnode,oldVnode)
          el.style.backgroundColor="red"
        }
      })

      Vue.directive("font-fang",{
        bind:function(el,binding,vnode,oldVnode){
          el.style.fontSize=binding.value+"px"
},
        update:function(el,binding,vnode,oldVnode){
          el.style.fontSize=binding.value+"px"
        }
      })

      Vue.directive("height-fang",function(el,binding){
        el.style.height=binding.value*20+"px"
      })
      var component1={
        data:function(){
          return{
            count:1
          }
        },
        template:`
        <div v-click-fang @click="count++" v-font-fang="count+10" v-height-fang="count" >模板一绑定事件{{count}}</div>
        `
      }
    var vue=new Vue({
      el:".app",
      components:{
        component1
      }
    })

如上，我们添加了三个组件，分别控制：
click-fang:点击后背景变红
font-fang:点击后根据count的值变更字体大小
height-fang:点击后变更元素高度

其中，font-fang中使用了bind和update两种钩子，使得组件得到了初始化和随着组件内容的更新而变化。
可以看到el拿到后我们可以将其当做html元素直接修改css。

简写组件

Vue.directive("height-fang",function(el,binding){
        el.style.height=binding.value*20+"px"
      })

如上就是一个简写的指令，他会执行bind和update，并且执行同样的方法。

局部指令

指令也可以直接在组件中定义：

var component1={
        data:function(){
          return{
            count:1
          }
        },
        template:`
        <div v-fontcolorFang v-click-fang @click="count++" v-font-fang="count+10" v-height-fang="count" >模板一绑定事件{{count}}</div>
        `,
        directives:{
         fontcolorFang:{
          inserted:function(el){
            el.style.color="green"
          }
         }
        }
      }