Vue自定义指令

最新推荐文章于 2025-11-03 15:25:35 发布

转载最新推荐文章于 2025-11-03 15:25:35 发布 · 133 阅读

博客介绍了自定义指令相关内容。指令用于操作DOM，使用形式为属性。自定义指令有全局和局部两种注册方式，全局注册用Vue.directive，局部注册在directives对象里配置。最后还进行了实例演示。

自定义指令
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 ) // 上一个绑定元素的信息

实例演示

   <div id="app">
        <div class="box">
         <button  @click = 'flag = false'> 点击 </button>
         <input type="text"  v-if = "flag" v-focus.yyb v-model = "msg">
         <input type="text"  v-if = "flag" v-focus v-model = "msg">
        </div>
      </div>

Vue.directive( 'focus',{
    bind ( el,binding,vnode,oldVnode ) { //调用一次，指令一绑定在元素身上就会触发
      // console.log( 'bind focus' )
      // console.log( 'el',el  ) // el 指令绑定的元素
      // console.log( 'binding',binding ) // 指令的详细信息
      // console.log( 'vnode', vnode )  // 当前绑定元素的信息
      // console.log( 'oldVnode',oldVnode ) // 上一个绑定元素的信息
      // el.style.background = 'red'
    },
    inserted (  el,binding,vnode,oldVnode ) { // 当前绑定的元素插入父节点时调用
      el.focus()
      if( binding.modifiers.yyb ){
        el.style.color = 'green'
      }else{
        el.style.color = 'red'
      }
      console.log( binding )
      console.log( 'inserted ' )
    },
    update ( el, binding, vnode, oldVnode ) {  // 当前指令绑定的元素发生改变
      console.log( 'update' )
      console.log( 'el',el  ) // el 指令绑定的元素
      console.log( 'binding',binding ) // 指令的详细信息
      console.log( 'vnode', vnode )  // 当前绑定元素的信息
      console.log( 'oldVnode',oldVnode ) // 上一个绑定元素的信息
    },
    componentUpdated ( el,binding,vnode,oldVnode) { //当前绑定元素发生改变，或是子元素发生改变
      console.log( 'componentUpdated' )
    },
    unbind ( el,binding,vnode,oldVnode) { // 组件销毁时触发
      console.log( 'unbind' )
    }
  })

  new Vue({
    el: '#app',
    data: {
      msg: 1000,
      flag: true
    },
    directives: {
      'focus': {
        bind () {

        },
        inserted () {

        },
        update () {

        },
        componentUpdated () {

        },
        unbind () {
          
        }
      }
    }
  })