Vue.js指令

常用内置指令

指令	作用
v-bind	用于动态绑定元素的属性(attr)
v-model	用于对表单元素进行双向数据绑定
v-if/v-else/v-show	这三条指令用于渲染，根据条件决定展示的模板内容
v-for	同样用于渲染，循环输出内容。如果需要使用索引可以用v-bind:key来指定索引变量。而且迭代变量是从1开始而不是0
v-on	主要用于事件绑定，可以简写为@，如v-on:click可以简写为@click
v-text	用于更新元素的textContent，类似于直接使用双花括号。不同的是在编译之前不会显示，可以避免未编译前的闪现问题
v-HTML	用于更新元素的innerHTML，接受的字符串不会进行编译等操作
v-el	为DOM元素注册一个索引，从而可以直接访问DOM元素
v-ref	类似v-el，作用于子组件，从而可以通过$refs访问子组件
v-pre	跳过这个元素及其子元素的编译
v-cloak	该指令与元素绑定直到编译结束
v-once	表明元素只渲染一次，之后绑定的数据即使发生变化，元素也不会更新

自定义指令

自定义指令用于封装对DOM元素的处理行为，以提高代码的复用率

指令的注册

注册方法

//全局指令的注册
Vue.directive(
    "directive-name",definition
)
//局部指令的注册
var vm = new Vue({
    el : "#app",
    directives: {
    directive-name: definition
  }
}) 

指令只在Vue的实例中生效

指令的定义对象

指令的定义对象即为上一节中提到的definition。主要通过指令作用于元素的过程的一系列钩子函数来进行控制

钩子函数

钩子函数	作用时机
bind	指令第一次绑定到元素时，只调用一次，可以用于初始化之类的动作
inserted	被绑定元素插入父节点时
update	被绑定元素所在的模板更新时
componentUpdated	被绑定元素所在模板完成一次更新周期时
unbind	指令与元素解绑时，只调用一次

完整的注册方式

//全局指令的注册
Vue.directive(
    "directive-name",{
        bind : function(){
            console.log('指令绑定了');
        },
        inserted : function(){
            console.log('元素插入父节点');
        }
    }
);
//局部指令的注册
var vm = new Vue({
    el : "#app",
    directives: {
    directive-name: {
    	bind : function(){
            console.log('指令绑定了');
        },
        inserted : function(){
            console.log('元素插入父节点');
        }
    }
  }
});

指令的实例属性

指令中还可以调用实例中的属性

可调用的实例属性：

参数	调用属性
el	指令所绑定的元素
binding.name	指令名，不包括v-的前缀
binding.value	指令的绑定值
binding.oldValue	指令绑定的前一个值，仅在update和componentUpdated的钩子函数中使用
binding.expression	绑定值的表达式或变量名
binding.arg	传给指令的参数
binding.modifiers	一个包含修饰符的对象
vnode	Vue编译生成的虚拟节点
oldVnode	上一个虚拟节点，仅在update和componentUpdated的钩子函数中使用

参数使用案例

Vue.directive('params-demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})