vue的自定义指令

自定义指令

1. 指令是用来操作DOM

2. 指令的使用形式： 属性

3. 自定义指令方式有两种：

   • 全局注册指令
     Vue.directive( 指令的名称， 指令的配置项 )

   • 局部注册指令
     directives: {
     ‘指令名称’: 指令的配置项
     }

   • 指令的配置项提供了5个钩子函数

     • 钩子函数中的参数
       console.log( ‘el’,el ) // el 指令绑定的元素
       console.log( ‘binding’,binding ) // 指令的详细信息
       console.log( ‘vnode’, vnode ) // 当前绑定元素的信息
       console.log( ‘oldVnode’,oldVnode ) // 上一个绑定元素的信息

js代码如下

    // 全局注册:
		//由directive定义 第一个参数为指令的名字，第2个参数为指令的配置项
    // Vue.directive( 指令的名称， 指令的配置项  ) 
    Vue.directive('focus', {
        // 指令的配置项提供了5个钩子函数   每个钩子函数都有4个参数   每个钩子函数的参数都相同

        bind(el, binding, Vnode, oldVnode) { //调用一次，指令一绑定在元素身上就会自动触发  可做一些初始化
            console.log(el); //绑定该指令的DOM元素
            console.log(binding); //该指令的详细信息
            console.log(Vnode); //当前绑定元素的信息
            console.log(oldVnode); //当前元素上一个绑定元素的信息
        },
        inserted(el, binding, Vnode, oldVnode) { // 当前绑定的元素插入父节点时调用   
        },
        update(el, binding, Vnode, oldVnode) { // 当前指令绑定的元素发生改变（数据改变，视图更新，所以帮顶元素改变 然后触发）
        },
        componentUpdated(el, binding, Vnode, oldVnode) { //与update类似 当前指令绑定的元素发生改变 并且子元素更新完成后触发
        },
        unbind(el, binding, Vnode, oldVnode) { // 组件销毁时触发
        }

    })
    
    //局部注册
    new Vue({
        el: '#app',
        directives: { //局部注册
            // 组件名称：配置项      也是含有5个钩子  
            'focus': {
            
                bind(el, binding, Vnode, oldVnode) { //调用一次，指令一绑定在元素身上就会自动触发  可做一些初始化
                console.log(el); //绑定该指令的DOM元素
                console.log(binding); //该指令的详细信息
                console.log(Vnode); //当前绑定元素的信息
                console.log(oldVnode); //当前元素上一个绑定元素的信息
                },
                inserted(el, binding, Vnode, oldVnode) { // 当前绑定的元素插入父节点时调用   
                },
                update(el, binding, Vnode, oldVnode) { // 当前指令绑定的元素发生改变（数据改变，视图更新，所以帮顶元素改变 然后触发）
                },
                componentUpdated(el, binding, Vnode, oldVnode) { //与update类似 当前指令绑定的元素发生改变 并且子元素更新完成后触发
                },
                unbind(el, binding, Vnode, oldVnode) { // 组件销毁时触发
                }
            }
        }
    })

html代码

	<div id="app">
		<button @click="flag=false">销毁</button>
        <input type="text" v-focus v-model='name' v-if='flag'>
 	</div>

end