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

說明

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

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

鉤子函數(shù)

• inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。
• bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進行一次性的初始化設(shè)置。
• update: 所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新。
• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
• unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。

vue 全局定義

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

定義：Vue.directive(指令名稱，{指令鉤子：功能函數(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-指令名稱='傳遞的參數(shù)'></div> // 傳遞參數(shù)可以根據(jù)功能需求進行操作

定義：directives{指令名稱:{鉤子函數(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為綁定元素，可以對其進行dom操作
?? ? ? ? ? console.log(binding) ? ? ? ? ?//一個對象，包含很多屬性屬性(在下面)
?? ? ? ?},
?? ? ? ?bind: function (el, binding, vnode) {
?? ??? ? ? ?el.innerHTML =binding.value
?? ??? ? ?}
? ?? ?}
? },
? methods:{
??? ?... ...
? }
}
</script>

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

• el：指令所綁定的元素，可以用來直接操作 DOM。
• binding：一個對象，包含以下 property：

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

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

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

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

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

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

• vnode：Vue 編譯生成的虛擬節(jié)點。
• oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用。

vue 自定義指令 directives選項

directives選項中定義 指令

使用時添加v-前綴

全局注冊

app.directive('xxx',{})

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

v-xx:[abc]='xxx'

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

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

可以簡寫為單純的回調(diào)函數(shù)

參數(shù)說明

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

第二個參數(shù) 為傳遞的對象

• .arg 綁定的參數(shù)
• .value 等號后對應(yīng)的值

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

當被應(yīng)用在一個多根節(jié)點的組件上時，指令會被忽略，并且會拋出一個警告。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論