vue自定義指令directives及其常用鉤子函數(shù)的示例分析

這篇文章主要為大家分析了vue自定義指令directives及其常用鉤子函數(shù)的示例分析的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)易懂，操作細(xì)節(jié)合理，具有一定參考價(jià)值。如果感興趣的話(huà)，不妨跟著跟隨小編一起來(lái)看看，下面跟著小編一起深入學(xué)習(xí)“vue自定義指令directives及其常用鉤子函數(shù)的示例分析”的知識(shí)吧。

自定義指令directives及常用鉤子函數(shù)

說(shuō)明

除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊(cè)自定義指令

使用的地方：有的情況下，你仍然需要對(duì)普通 DOM 元素進(jìn)行底層操作，這時(shí)候就會(huì)用到自定義指令

鉤子函數(shù)

• inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。

• bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。

• update: 所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒(méi)有。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新。

• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。

• unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

vue 全局定義

使用：<span v-指令名稱(chēng)> welcome </span> 也可以 v-指令名稱(chēng)="傳遞的參數(shù)"

定義：Vue.directive(指令名稱(chēng)，{指令鉤子：功能函數(shù)})

<div id="root">
        <span v-red>welcome</span>
    </div>
    <script type="text/javascript">
        Vue.directive('red',{       //定義 ???
            inserted:function(el){  //鉤子函數(shù) ???
                el.style.background = 'red';
            }
        });
        var vm = new Vue({
               el:"#root"
            data:{            
            },
        })
    </script>

局部定義（vue-cli）

使用：<div v-指令名稱(chēng)='傳遞的參數(shù)'></div> // 傳遞參數(shù)可以根據(jù)功能需求進(jìn)行操作

定義：directives{指令名稱(chēng):{鉤子函數(shù):功能函數(shù)}}

<template>
  <div class="hello">
      <div v-test='name'></div>
  </div>
</template>
<script>

export default {
  data () {
    return {
     name:'userName',
    }
  },
  directives:{     //自定義指令 ???
      test:{
        inserted: function (el,binding) { //e為綁定元素，可以對(duì)其進(jìn)行dom操作
           console.log(binding)          //一個(gè)對(duì)象，包含很多屬性屬性(在下面)
        },
        bind: function (el, binding, vnode) {
            el.innerHTML =binding.value
          }
      }
  },
  methods:{
     ... ...
  }
}
</script>

鉤子函數(shù)里面的參數(shù)

• el：指令所綁定的元素，可以用來(lái)直接操作 DOM。

• binding：一個(gè)對(duì)象，包含以下 property：

name：指令名，不包括 v- 前綴。

value：指令的綁定值，例如：v-my-directive=“1 + 1” 中，綁定值為 2。

oldValue：指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無(wú)論值是否改變都可用。

expression：字符串形式的指令表達(dá)式。例如 v-my-directive=“1 + 1” 中，表達(dá)式為 “1 + 1”。

arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 “foo”。

modifiers：一個(gè)包含修飾符的對(duì)象。例如：v-my-directive.foo.bar 中，修飾符對(duì)象為 { foo: true, bar: true }。

• vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。

• oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。

vue 自定義指令 directives選項(xiàng)

directives選項(xiàng)中定義 指令

使用時(shí)添加v-前綴

全局注冊(cè)

app.directive('xxx',{})

支持動(dòng)態(tài)指令參數(shù)

v-xx:[abc]='xxx'

指令函數(shù)能夠接受所有合法的 JavaScript 表達(dá)式。

如果方法只需要在 mounted 和 updated 的時(shí)間鉤子觸發(fā)

可以簡(jiǎn)寫(xiě)為單純的回調(diào)函數(shù)

參數(shù)說(shuō)明

第一個(gè)參數(shù) 為綁定的元素

第二個(gè)參數(shù) 為傳遞的對(duì)象

• .arg 綁定的參數(shù)

• .value 等號(hào)后對(duì)應(yīng)的值

在應(yīng)用到組件上時(shí)，和非 prop 的 attribute不同，指令不會(huì)通過(guò) v-bind="$attrs" 被傳入另一個(gè)元素。

當(dāng)被應(yīng)用在一個(gè)多根節(jié)點(diǎn)的組件上時(shí)，指令會(huì)被忽略，并且會(huì)拋出一個(gè)警告。

關(guān)于“vue自定義指令directives及其常用鉤子函數(shù)的示例分析”就介紹到這了,更多相關(guān)內(nèi)容可以搜索億速云以前的文章，希望能夠幫助大家答疑解惑，請(qǐng)多多支持億速云網(wǎng)站！