Vue 自定义指令

一.Vue.directive自定义指令

main.js

Vue.directive("changeColor",function(el,binding,vnode){
  console.log(el);
  console.log(binding);
  console.log(vnode)
  el.style.color="green"

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

})

这是一个点击按钮让其上边数字++的例子。自己定义一个全局的指令。我们这里使用Vue.directive( );可以看到字体的颜色变成了绿色。效果如图。

注：

• el: 指令所绑定的元素，可以用来直接操作DOM。
• binding: 一个对象，包含指令的很多信息。
• vnode: Vue编译生成的虚拟节点。

二.局部指令

var app=new Vue({
    el:'#app',
        data:{
            num:10,
            color:'green'
            },
        methods:{
            add:function(){
                this.num++;
            }
        },
        directives:{
            jspang:function(el,binding,vnode){
                el.style='color:'+binding.value;
            }
        }
 })