快捷導(dǎo)航

vue全局自定義指令和局部自定義指令的使用

更新時(shí)間：2022年01月24日 08:59:14 作者：kingov

這篇文章主要介紹了vue全局自定義指令和局部自定義指令的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

局部自定義指令(只針對(duì)組件內(nèi)的元素)

父組件app.vue

<template>
  <div id="app">
    <test-api></test-api>
  </div>
</template>
<script>
import testApi from './components/testApi.vue'
export default {
  data (){
    return {
      
    }
  },
  watch:{
    
  },
  methods:{
    
  },
  components:{
    testApi
  }
}
</script>
<style >
</style>

子組件testApi.vue

<template>
  <div>
    <!-- 讓input元素在打開頁面的時(shí)候就獲得焦點(diǎn) -->
    <input type="text" v-autoFocus >
  </div>
</template>
<script>
export default {
  directives:{
    // 自定義指令的名字
    autoFocus:{
      // 鉤子函數(shù)，被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中)。
      inserted(el){
        el.focus()
        console.log( 'inserted' );
      },
      // 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
      bind(){
        console.log( 'bind' );
      },
      // 所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其孩子的 VNode 更新之前。
      // 指令的值可能發(fā)生了改變也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 
      update(){
        console.log( 'update' );
      },
      // 所在組件的 VNode 及其孩子的 VNode 全部更新時(shí)調(diào)用。
      componentUpdated(){
        console.log( 'componentUpdated' );
      },
      // 只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。
      unbind(){
        console.log( 'unbind' );
      }
      
    }
  },
  data () {
    return {
      
    }  
  },
  props:[],
  methods:{
    
  },
  created(){
    
  },
  mounted(){
    
  },
  components:{
  }
}
</script>
<style scoped>
</style>

效果圖：

定義全局自定義指令

在任意頁面的任意input里加上v-autoFcs

Vue.directive('autoFcs',{
  // 鉤子函數(shù)，被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中)。
  inserted(el){
    el.focus()
    console.log( 'inserted' );
  },
  // 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
  bind(){
    console.log( 'bind' );
  },
  // 所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其孩子的 VNode 更新之前。
  // 指令的值可能發(fā)生了改變也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 
  update(){
    console.log( 'update' );
  },
  // 所在組件的 VNode 及其孩子的 VNode 全部更新時(shí)調(diào)用。
  componentUpdated(){
    console.log( 'componentUpdated' );
  },
  // 只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。
  unbind(){
    console.log( 'unbind' );
  }
})

效果圖：

自定義指令的鉤子函數(shù)

鉤子函數(shù)

指令定義函數(shù)提供了幾個(gè)鉤子函數(shù) (可選)：

bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中)。
update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其孩子的 VNode 更新之前。指令的值可能發(fā)生了改變也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。
componentUpdated：所在組件的 VNode 及其孩子的 VNode 全部更新時(shí)調(diào)用。
unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

接下來我們來看一下鉤子函數(shù)的參數(shù) (包括el，binding，vnode，oldVnode)。

自定義指令鉤子函數(shù)的參數(shù)

鉤子函數(shù)參數(shù)

鉤子函數(shù)被賦予了以下參數(shù)：

el：指令所綁定的元素，可以用來直接操作 DOM 。
binding：一個(gè)對(duì)象，包含以下屬性：
name：指令名，不包括v-前綴。
value：指令的綁定值，例如：v-my-directive=“1 + 1”, value 的值是2。
oldValue：指令綁定的前一個(gè)值，僅在update和componentUpdated鉤子中可用。無論值是否改變都可用。
expression：綁定值的字符串形式。例如v-my-directive=“1 + 1”，expression 的值是"1 + 1"。
arg：傳給指令的參數(shù)。例如v-my-directive:foo，arg 的值是"foo"。
modifiers：一個(gè)包含修飾符的對(duì)象。例如：v-my-directive.foo.bar, 修飾符對(duì)象 modifiers 的值是{ foo: true, bar: true }。
vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)，查閱 VNode API 了解更多詳情。
oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在update和componentUpdated鉤子中可用。

例子

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>

Vue.directive('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(', ')
  }
})
new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})