Vue自定义指令

在 Vue，除了核心功能默认内置的指令 ，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。

全局注册：

<template>
  <div class="home">
    <button v-test>测试</button>
  </div>
</template>

<script>

import Vue from 'vue'
Vue.directive('test',{
  bind(){//元素初始化
    console.log('bind')
  },
  inserted(){//元素插入
    console.log('inserted')
  },
  update(){//元素更新
    console.log('update')
  },
  componentUpdated(){//元素更新，保证子元素更新完成
    console.log('componentUpdated')
  },
  unbind(){//解绑，元素移除
    console.log('unbind')
  },
})


export default {
  data(){
    return {

    }
  }
}
</script>


<style lang="scss">

</style>

局部注册：

<template>
  <div className="home">
    <button v-test>测试</button>
  </div>
</template>

<script>

export default {
  data() {
    return {}
  },
  directives:{
    test:{
      bind(){//元素初始化
        console.log('bind')
      },
      inserted(){//元素插入
        console.log('inserted')
      },
      update(){//元素更新
        console.log('update')
      },
      componentUpdated(){//元素更新，保证子元素更新完成
        console.log('componentUpdated')
      },
      unbind(){//解绑，元素移除
        console.log('unbind')
      },
    }
  }
}
</script>


<style lang="scss">

</style>

模拟v-show

<template>
  <div>
    <button v-my-show="isShow">测试</button>
    <button @click="isShow = !isShow">更新</button>
  </div>
</template>

<script>
function showOperation(element,binding,vnode){
  if(binding.value){
    element.style.display = 'block'
  }else {
    element.style.display = 'none'
  }
}
export default {
  data() {
    return {
      isShow:true
    }
  },
  directives:{
    'my-show':{
      inserted:showOperation,
      update:showOperation,
    }
  }
}
</script>


<style lang="scss">

</style>