文章目錄

一、vue中內(nèi)置的指令
二、vue中自定義指令

1. 自定義全局指令
2. 自定義局部指令
3. 鉤子函數(shù)

一、vue中內(nèi)置的指令

v-text 指令用于將數(shù)據(jù)填充到標(biāo)簽中，作用和插值表達(dá)式類似，但是不會(huì)出現(xiàn)閃動(dòng)問題。

v-html 指令用于將HTML片段填充到標(biāo)簽中，可能有安全問題。

v-pre 指令用于顯示原始信息。

v-once 指令是只渲染一次，后面元素中的數(shù)據(jù)再更新變化，都不會(huì)重新渲染。

v-for 指令用于遍歷，把一個(gè)數(shù)組對(duì)應(yīng)為一組元素。

v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。指令簡(jiǎn)寫為 @

v-bind 指令用于屬性綁定,把數(shù)據(jù)綁定在HTML元素的屬性上，指令簡(jiǎn)寫為 : 要綁定的屬性。

v-model 指令可以實(shí)現(xiàn)表單元素和 Model 中數(shù)據(jù)的雙向數(shù)據(jù)綁定。

v-if & v-else-if & v-else 指令用于條件渲染。

v-if & v-show 指令用于隱藏和顯示元素

v-if 的特點(diǎn)：每次都會(huì)重新刪除或創(chuàng)建元素
v-show 的特點(diǎn)：每次不會(huì)重新進(jìn)行DOM的刪除和創(chuàng)建操作，只是切換了元素的 display:none 樣式

注意：

① 如果元素涉及到頻繁的切換，最好不要使用 v-if 指令, 應(yīng)該選擇使用 v-show 指令；
② 如果元素可能一直不會(huì)被顯示出來被用戶看到，則選擇使用 v-if 指令

二、vue中自定義指令

在 Vue2.0 中，代碼復(fù)用和抽象的主要形式是組件。然而，有的情況下，開發(fā)人員仍然需要對(duì)普通 DOM 元素進(jìn)行底層操作，這時(shí)候就會(huì)用到自定義指令。

1. 自定義全局指令

注冊(cè)一個(gè) v-focus 指令，實(shí)現(xiàn)了在頁(yè)面加載完成之后自動(dòng)讓輸入框獲取到焦點(diǎn)的小功能。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>全局自定義指令</title><script src="js/vue.js"></script></head><body><div id="app"><p>頁(yè)面載入時(shí)，input 元素自動(dòng)獲取焦點(diǎn)：</p><input type="text" placeholder="我是全局自定義指令" v-focus></div><script>// 注冊(cè)一個(gè)全局自定義指令 `v-focus`Vue.directive('focus', {// 當(dāng)被綁定的元素插入到 dom 中時(shí)…… ，其中參數(shù) el 為dom元素inserted: function (el) {// 聚焦元素el.focus()}})var vm = new Vue({el: '#app',data: {}})</script></body></html>

只要打開這個(gè)頁(yè)面后還沒點(diǎn)擊過任何內(nèi)容，這個(gè)輸入框就應(yīng)當(dāng)還是處于聚焦?fàn)顟B(tài)。

效果演示：

2. 自定義局部指令

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>局部自定義指令</title><script src="js/vue.js"></script></head><body><div id="app"><input type="text" placeholder="我是局部自定義指令" v-color="color"></div><script>var vm = new Vue({el: '#app',data: {color: 'red'},// 注冊(cè)一個(gè)局部自定義指令 `v-color`directives: {color: {// binding 為自定義的函數(shù)形參,通過自定義屬性傳遞過來的值,存到 binding.value 里面bind: function (el, binding) {    // 根據(jù)指令的參數(shù)進(jìn)行設(shè)置背景色    el.style.backgroundColor = binding.value}}}})</script></body></html>

只要通過指令綁定給了元素，不管元素有沒有被插入到頁(yè)面中去，這個(gè)元素肯定會(huì)有一個(gè)內(nèi)聯(lián)樣式.

效果演示：

注意：

和JS行為有關(guān)的操作，一般在 inserted 中去執(zhí)行；
和樣式有關(guān)的操作，一般在 bind 執(zhí)行

3. 鉤子函數(shù)

① 指令定義對(duì)象可以提供如下幾個(gè)鉤子函數(shù) (均為可選)：

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

② 指令鉤子函數(shù)會(huì)被傳入以下參數(shù)：

參數(shù)	說明
el	指令所綁定的元素，可以用來直接操作 DOM。
binding	綁定一個(gè)對(duì)象。
vnode	Vue 編譯生成的虛擬節(jié)點(diǎn)。
oldVnode	上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。

③ 綁定對(duì)象屬性說明：

屬性	說明	示例
name	指令名，不包含前綴 v-。	v-focus 中的 focus。
value	指令的綁定的值（計(jì)算后）。	v-my-directive=“1 + 1” 中，綁定值為 2。
oldValue	指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。	——
expression	字符串形式的指令表達(dá)式（不計(jì)算）。	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 }。

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。