vue Notes-vue自定义指令

vue自定义指令指的是除了vue.js默认内置的指令外,自己定义的一些指令

一.注册自定义指令

1.注册全局自定义指令(指令可以在全局使用)

注册全局自定义指令需在实例化vue之前:

注册全局指令需先在html标签中定义指令v-globa ,v-mycolor;在js中使用Vue.directive绑定组件的名字和相关指令操作

1.Vue.dircetive

Vue.dircetive中有两个参数,第一个参数是自定义指令名,第二个参数是是方法(匿名函数)。

1.钩子函数参数el binding vnode oldVnode

1.el 指令所绑定的元素,可以用来直接操作DOM。
2.binding: 一个对象,包含指令的很多信息。
1.binding: 一个对象,包含指令的很多信息。
2.binding.name: 指令名,不包括 v- 前缀。
3.binding.value: 指令的绑定值, 例如: v-mycolor=“color”,value 的值是 color的值 为red
4.binding.expression: 绑定值的字符串形式。 例如 v-mycolor=“color” , expression 的值是 “color”。
3.vnode Vue编译生成的虚拟节点。
4.oldVnode 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

2.注册局部自定义指令(指令只能在组件内使用)

自定义指令的生命周期

vue自定义指令有五个生命周期bind inserted updae componentUpdated unbind

Vue.directive('my-directive', {
    bind: function () { //只调用一次 指令第一次绑定到元素时调用,用该钩子函数可以定义一个绑定时执行一次的初始化
        ...
    },
    inserted: function () { // 被绑定元素插入父节点时调用,当父节点存在时调用,不一定存在document中(插入完成时调用)
        ...
    },
    update: function (newValue, oldValue) { //当被绑定元素的更新时调用,无论绑定的值是否变化,通过比较更新前后的绑定值,可以忽略模板上不必要的更新(更新时调用)
        ...
    },
    componentUpdated: function () { // 被绑定元素所在模板完成一次更新周期时调用(更新完成时调用)
        ...
    },
    unbind: function () { //指令与元素解绑时调用只调用一次 (解绑时调用)
        ...
    }
})

2.Vue.extend

vue.extend返回的是一个对象,常服务于vue.commponent用来生成组件。参数是一个包含组件选项的对象。

vue.extend 的基本格式:

html:

<codepen></codepen>  //自定义标签

js:

var codepenExtend = Vue.extend({  //构造codepenExtend组件 
    template:"<p><a :href='codepenUrl'>{{codepenName}}</a></p>", //定义模板
    data:function(){ //data 在 Vue.extend()中它必须是函数 
        return{
            codepenName:'vue.extend',
            codepenUrl:'https://codepen.io/w4ctech/pen/RyJogY'
        }
    }
});   
new codepenExtend().$mount('codepen'); // 创建 codepenExtend实例,并挂载到一个元素上。

3.Vue.set

Vue.set在构造器外部操作构造器内部的数据、属性或者方法。

1.在外部改变数据有三种方法:

1.直接改变

vm.arr[0]='ddd';

2.Vue.set

Vue.set(vm.arr2,0,'444');

3.vm.$set

vm.$set(vm.arr3,0,"coding")