照片 by [雅詩蘭黛森斯]
指令是帶有v前綴的特殊屬性猪勇。指令的工作是當(dāng)其表達(dá)式的值發(fā)生變化時埠对，對DOM反應(yīng)性地應(yīng)用副作用裁替。js提供了廣泛的指令供您使用。您可能已經(jīng)使用了v-if襟沮、v-repeat、v-model和v-show指令膀跌。
在本文中固灵，我將解釋指令的各個部分以及可以使用的內(nèi)容。然后丛忆，我將向您展示如何創(chuàng)建各種自定義指令熄诡，以便您可以將編程需求直接應(yīng)用于DOM元素诗力。因此苇本，讓我們開始討論指令中包含的內(nèi)容。
指令名稱
最基本的自定義指令只有一個名稱瓣窄。它不接受任何參數(shù)，也沒有任何修飾符递递。如果不傳遞值啥么，這將不是非常靈活悬荣，但您仍然可以擁有DOM元素的一些功能。
您可能熟悉的一個示例是指令的最基本版本v-else践叠。以下是我們即將創(chuàng)建的自定義指令的示例：
<app-navigation v-sticky></app-navigation>
將值傳遞給指令
您可以將值傳遞給自定義指令禁灼。這是一個例子：
<div v-if="isVisible">Show this</div>
在此示例中轿曙，如果data屬性isVisible為true僻孝，則顯示v-if指令守谓。我們知道這是在尋找數(shù)據(jù)屬性斋荞，因?yàn)樗谝栔小Ｏ喾囱堕埽绻覀兿胍獙⒁粋€字符串作為值傳遞給指令别洪，您將執(zhí)行以下操作：
<div v-color="'red'">Show this</div>
參數(shù)
自定義指令可以在指令名稱后面加上冒號表示的“參數(shù)”柳刮。這是一個例子：
<app-navigation v-sticky:bottom></app-navigation>
在上面的示例中，自定義指令的名稱是sticky秉颗。這個參數(shù)是bottom。
指令只能采用一個參數(shù)哪替。
修飾符
修飾符是由點(diǎn)表示的特殊后綴凭舶，表示指令應(yīng)以某種特殊方式綁定帅霜。修飾符控制指令的行為方式呼伸。以下是我們稍后將創(chuàng)建的自定義指令的示例：
<span v-format.underline>guide</span>
在上面的例子中括享，。underline修飾符告訴v-format指令將下劃線應(yīng)用于文本剩愧。
您可以通過鏈接指令在指令上使用多個修飾符澳叉。這是一個例子：
<span v-format.bold.highlight.underline>guide</span>
在上面的示例中沐悦，文本將為粗體五督，突出顯示并具有下劃線充包。
創(chuàng)建自定義指令
現(xiàn)在您了解了Vue.js中指令的基礎(chǔ)知識基矮。除了核心中提供的默認(rèn)指令集外冠场，Vue還允許您注冊自己的自定義指令。讓我們創(chuàng)建自己的自定義指令钢悲。
在它的基礎(chǔ)上凉当，我們可以通過使用Vue.directive并為其命名來創(chuàng)建全局指令掺出。以下是使用名稱sticky創(chuàng)建自定義指令的示例惭等。
Vue.directive('sticky');
當(dāng)我們想在DOM元素上使用這個自定義指令時辞做，它看起來像：
<app-navigation v-sticky></app-navigation>
現(xiàn)在我們已經(jīng)創(chuàng)建了第一個自定義指令，現(xiàn)在我們需要在它后面創(chuàng)建代碼凭豪。在編寫代碼之前晒杈，我們需要了解Vue為我們在custom指令中提供的值。
指令掛鉤
Vue為自定義指令提供了一系列鉤子拯钻。每個鉤子都有一些參數(shù)選項(xiàng)。以下是可用的鉤子：
- bind - 當(dāng)指令附加到元素時會發(fā)生這種情況拼余。
- inserted - 一旦元素插入父DOM就會發(fā)生這種情況
- update - 這在元素更新時發(fā)生亩歹，但子項(xiàng)尚未更新
- componentUpdated - 一旦更新了組件和子組件凡橱，就會發(fā)生這種情況
- unbind - 刪除指令后會發(fā)生這種情況
其中每個都有el，binding和vnode參數(shù)可供他們使用稼钩。這些參數(shù)是：
el - 綁定所依賴的元素
binding - 一個包含傳遞給鉤子的參數(shù)的對象。有許多可用的參數(shù)坝撑，包括name，value巡李，oldValue，expression侨拦，arg和modifiers辐宾。
vnode - 允許您根據(jù)需要直接引用虛擬DOM中的節(jié)點(diǎn)。
雙方binding和vnode應(yīng)被視為只讀螃概。
update和componentUpdated都公開了一個名為oldvnode的附加參數(shù)。該oldvnode參數(shù)用于傳遞舊值和新值之間進(jìn)行區(qū)分吊洼。
bind和update是五個中最有用的。
獲取代碼
如果要查看所有這些自定義指令的實(shí)際操作冒窍，可以在我創(chuàng)建的分支中。我們將創(chuàng)建的所有自定義指令都可以在main.js文件中找到综液。只需取消注釋演示編號即可查看代碼
。
演示＃1 v-sticky
如果您在代碼沙箱中跟隨谬莹，那么這是在main.js文件中找到的Demo＃1。v-sticky指令已應(yīng)用于<app-navigation>埠戳。滾動時整胃，導(dǎo)航將保持固定在屏幕上喳钟。
讓我們編寫我們想要的v-sticky指令所具有的行為在岂。當(dāng)該指令應(yīng)用于DOM元素時蛮寂，我們希望在屏幕上修復(fù)該元素。這是我們的v-sticky指令的自定義代碼：
Vue.directive('sticky',
function(el, binding, vnode) {
el.style.position = 'fixed';
}
));
讓我們分解一下代碼中的內(nèi)容祠丝。我正在使用Vue.directive創(chuàng)建一個名為“ sticky ” 的新全局指令除嘹。在名稱之后岸蜗，我們有一個函數(shù)璃岳，它具有我們之前討論過的三個參數(shù)。在函數(shù)中单芜，我正在使用指令已經(jīng)應(yīng)用的元素并獲得它的樣式然后它的位置犁柜。我把它設(shè)置為固定。
稍后我們將修改器應(yīng)用于此自定義指令馋缅。
演示＃2 v-orange
我們將創(chuàng)建的下一個自定義指令是v-orange萤悴。該指令將文本顏色設(shè)置為橙色。以下是此指令的代碼：
Vue.directive("orange", function(el, binding, vnode) {
el.style.color = "orange";
});
我們可以將此指令應(yīng)用于HelloWorld組件中顯示的消息蹋盆。應(yīng)用后栖雾，歡迎消息現(xiàn)在為橙色岩灭。
v-orange指令中的橙色文本
演示＃3 v-color
之前的指令不是很通用赂鲤。如果您希望文本為藍(lán)色而不是橙色柱恤，則必須編寫另一個自定義指令找爱。我們將創(chuàng)建一個名為v-color的新自定義指令。此自定義指令將采用將傳遞給它的值寺谤。此值是我們要應(yīng)用于歡迎消息的顏色变屁。
前面我提到綁定是一個對象意狠，它包含傳遞給指令的參數(shù)。該對象中包含的一個項(xiàng)是傳入的值闷板。我們將在代碼中使用它來將文本設(shè)置為該值遮晚。
Vue.directive("color", function(el, binding, vnode) {
el.style.color = binding.value;
});
現(xiàn)在我們的指令更加靈活。您可以傳入任何眾所周知的顏色字符串县遣，如“紅色”或“藍(lán)色”创泄，并傳入有效的十六進(jìn)制顏色鞠抑，如＃ffff00。這是我們新的v-color指令的圖像被應(yīng)用三次秒梳。第一次顏色為紅色酪碘，第二次顏色為藍(lán)色，最后一次顏色為黃色兴垦，使用＃ffff00的十六進(jìn)制代碼。
我們的v-color自定義指令的結(jié)果
演示＃4 v-sticky帶有參數(shù)
您可以為自定義指令提供參數(shù)狡赐。我們將修改我們v-sticky之前創(chuàng)建的代碼以接受參數(shù)钦幔。大多數(shù)網(wǎng)站的屏幕頂部都有導(dǎo)航，屏幕底部有一個頁腳搀擂。
我們將使用該參數(shù)告訴我們導(dǎo)航是否應(yīng)固定在屏幕的頂部或底部哨颂。綁定對象將包含一個名為arg的值揍庄，該值包含我們傳遞給自定義指令的參數(shù)东抹。
為了簡化操作，如果沒有參數(shù)傳遞給指令缭黔，我假設(shè)導(dǎo)航應(yīng)該固定在屏幕的頂部。如果我收到一個參數(shù)别渔，那么導(dǎo)航將固定在屏幕的底部哎媚。
為了區(qū)分頂部和底部導(dǎo)航，我在頂部導(dǎo)航中添加了灰色的背景顏色喊儡，在底部導(dǎo)航中添加了棕褐色。這是代碼：
Vue.directive("sticky", function(el, binding, vnode) {
const loc = binding.arg === "bottom" ? "bottom" : "top";
el.style.position = "fixed";
el.style[loc] = 0;
if (loc === "bottom") {
el.style.background = "burlywood";
} else {
el.style.background = "#7e7e7e";
}
});
將我們更新的自定義指令應(yīng)用于導(dǎo)航和頁腳后买喧，它看起來像這樣淤毛。
使用參數(shù)的v-sticky自定義指令
使用修飾符演示＃5 v-format
您可以根據(jù)需要向自定義指令添加任意數(shù)量的修飾符低淡。我們將創(chuàng)建一個名為format的新自定義指令蔗蹋。此自定義指令將接受以下一個或多個修飾符：
- underline
- bold
- highlight
binding參數(shù)是一個對象。該對象包含自定義指令的所有修飾符兽泣。綁定上的修飾符實(shí)際上也是一個對象胁孙。該對象將包含已應(yīng)用的每個修改器的鍵涮较。我們將使用它來應(yīng)用不同的文本格式狂票。這是代碼：
Vue.directive("format", function(el, binding, vnode) {
const modifiers = binding.modifiers;
if (modifiers.underline) {
el.style.textDecoration = "underline";
}
if (modifiers.bold) {
el.style.fontWeight = "bold";
}
if (modifiers.highlight) {
el.style.background = "#ffff00";
}
});
在上面的代碼中，我們獲取修飾符對象并將其分配給名為修飾符的變量慌盯。然后我們檢查我們支持的每個可能的修飾符亚皂。如果存在該修飾符国瓮，則我們應(yīng)用相應(yīng)的文本修飾乃摹。
我們已將underline修飾符應(yīng)用于單詞指南。我們已將bold修飾符應(yīng)用于配置/定制播歼。我已將highlight修飾符應(yīng)用于單詞check out荚恶。
為了表明您可以將多個修飾符應(yīng)用于自定義指令磷支，我已將所有三個修飾符應(yīng)用于文本Installed CLI Plugins。
這是它的樣子廓潜。
演示＃6 v-hook-demo顯示生命周期鉤子
之前我在您的自定義指令中討論了可用的生命周期鉤子辩蛋。如果希望自定義指令基于生命周期鉤子工作，則需要為代碼使用不同的格式伤为。您將擁有一個對象绞愚，而不是在自定義指令的名稱后面使用函數(shù)颖医。該對象上的鍵將是一個或多個可用的生命周期鉤子。
在代碼沙箱中糖驴，我向About視圖添加了一些代碼贮缕。代碼有一個按鈕晌杰。單擊按鈕時肋演，數(shù)字會更新爹殊。
在HelloWorld組件中梗夸，我已將v-hook-demo組件應(yīng)用于第一個div号醉。
這是v-hook-demo組件的代碼畔派。
Vue.directive("hook-demo", {
bind(el, binding, vnode) {
console.log("bind");
},
inserted(el, binding, vndoe) {
console.log("inserted");
},
updated(el, binding, vnode) {
console.log("updated");
},
componentUpdated(el, binding, vnode, oldVnode) {
console.log("componentUpdated");
}
});
如果刷新屏幕线椰，看看你的控制臺，你會發(fā)現(xiàn)bind和inserted生命周期掛鉤得以實(shí)施烦绳。如果您轉(zhuǎn)到“關(guān)于”頁面并單擊該按鈕卿捎，您將看到componentUpdated生命周期鉤子已實(shí)現(xiàn)午阵。
結(jié)論
本文概述了在Vue.js中組成指令的項(xiàng)目享扔。在介紹之后伪很，我將向您介紹創(chuàng)建自定義指令的六個示例。這些示例顯示了一個基本的自定義指令猫十，一個傳遞值的指令拖云，一個使用參數(shù)的指令以及一個使用修飾符的指令应又。最后一個示例顯示了可用的生命周期掛鉤。
我希望你喜歡這篇文章尤筐。如果您有任何疑問或想留下反饋盆繁，請發(fā)表評論旬蟋。
轉(zhuǎn)：https://medium.com/js-dojo/creating-custom-directives-in-vue-js-286142392fd8
