directive

全局API

全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如我们今天要学习的指令Vue.directive。说的简单些就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。

<div id="app">
      <div v-jspang="color" id="demo">
          {{num}}
      </div>
      <div>
          <button  @click="add">Add</button>
      </div>
  </div>

<script type="text/javascript">
  Vue.directive('jspang',function(el,binding,vnode){
      el.style='color:'+binding.value;
      console.log(el);
      console.log(binding);
      console.log(binding.name);
      console.log(binding.value);
      console.log(binding.expression);
      console.log(vnode);


  });


    var app=new Vue({
        el:'#app',
        data:{
            num:10,
            color:'red'
        },
        methods:{
            add: function(){
                this.num ++;
            }
        }
    })
</script>

擷取14.PNG

自定义指令中传递的三个参数

el: 指令所绑定的元素，可以用来直接操作DOM。

binding: 一个对象，包含指令的很多信息。

vnode: Vue编译生成的虚拟节点。

自定义指令的生命周期

自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind

bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次，指令与元素解绑时调用。