Vue 通過自定義指令回顧 v 內建指令

vue.js 的各種指令（directives）更加方便我們去資料驅動 dom，例如 v-bind、v-on、v-model、v-if、v-for、v-once 等內建指令，這些指令的職責就是當表示式改變時將某些行為應用到 dom 上，盡量不去操作增刪改 dom。通過了解如何去自定義指令，可以想象內建指令是如何完成的。

在需要特殊功能時，使用自定義指令對 dom 進行底層操作

自定義指令的註冊分為全域性註冊和區域性註冊，類似元件的註冊，只是方法名為directive，寫法如下：

// 全域性註冊 自定義指令
vue.directive(『mydir』,);
// 全域性註冊 自定義指令函式
vue.directive('mydir', function () )
// 區域性註冊（只針對元件內元素）
export default }}

需要注意的是：vue.directive( ) 註冊指令要在例項初始化 new vue( ) 之前才能全域性註冊指令。定義指令時駝峰式寫法會報錯，所以一般小寫。

自定義指令的選項是由幾個鉤子函式（可選）組成，可以根據需求選擇不同的鉤子，例如使用全域性註冊乙個指令時：

vue.directive('mydir', ,
update: function () ,  
inserted: function () ,
componentupdated: function () ,
unbind: function () 
})

以上每個鉤子函式都有幾個引數可用：

// 乙個帶自定義指令的元素
mydirective
// 部分 js **
export default }}
}

控制台輸出截圖：

其中對於binding物件輸出的屬性有：

vue 內建指令v-bind用於動態更新 html 元素屬性，使用v-bind:someattr = "somedata"或者語法糖:someattr = "somedata"就可以在 somedata 改變時更新繫結的 someattr 屬性。

繫結單一的屬性值

鏈結

測試 data 如下：

// js data :

v-bind 最常用的是繫結 class 或 style 屬性來動態改變樣式。例如可以給:class設定乙個物件來動態切換 class 的值：

當 isred:true 時渲染輸出：

物件中可以傳入多個屬性值來動態切換 class：

當 isa、isb 變化時 classa、classb 會動態更新，當都為 true 時顯然渲染結果為：

同理對於 style 可以傳入物件屬性，並且可以使用字串拼接：

對於元素中的各個物件可以統一用 v-bind 繫結：

class 可以傳入多值，給:class繫結乙個陣列就可以使用 class 列表

例如當時渲染結果為：

還可以在陣列語法中使用三元表示式切換 class，例如：

在 class 有多個條件時使用三元表示式比較繁瑣，可以在陣列語法中使用物件語法：

v-bind的修飾符很少，api 中只提供.prop、.camel和.sync，並且多用於元件，使用方式示例：

v-on 用於動態繫結事件***，使用v-on:someevent = "somefunction"或者語法糖@someevent = "somefunction"就可以監聽 someevent 進行互動。

@someevent呼叫的方法名後面可以不跟（），例如：

鏈結 change button

可以在 methods 中新增函式：

// 部分 js **
methods :
}

當然v-on還可以使用物件語法監聽多個事件：

對於在 html 元素上監聽的事件，當 viewmodel 銷毀時，所有的事件處理器會自動刪除，無需自己清理。

vue 可以將原生事件物件引數 event 傳入事件方法中，並提供了特殊變數$event用來訪問元素 dom 事件。此外可以通過一些事件修飾符來實現特定的事件，如.stop、.prevent、.capture、.once等，常用的使用示例：

此外，v-on還提供按鍵修飾符來監聽鍵盤事件，鍵值為.keycode，常用有.entry、.delete、.tab、.esc、.space、.down等，如下：

此外還有系統修飾符監聽鍵盤事件，不同的系統其鍵盤/系統修飾符不一樣。這些按鍵修飾符可以任意組合使用。

條件渲染v-if根據表示式的值的真假條件渲染元素，在表示式為真時渲染，為假時移除。

當 status 為 1 時顯示此行當 status 為 2 時顯示此行其它情況預設顯示此行

v-show也是條件渲染，但只切換元素的 css 屬性display，無論條件真假都會被編譯，相比於v-if更適用於頻繁切換場景。

當 status 為 1 時顯示此行

當 data: 時隱藏，但依舊會被編譯，渲染結果為：

當 status 為 1 時顯示此行

顯然在 vue.js 內建的元素上可以使用v-if，但不能使用v-show，可以思考下為什麼。

列表渲染指令v-for常用於陣列遍歷或列舉乙個物件的迴圈顯示，必須結合in使用特定語法alias in expression為當前遍歷的元素提供別名：

}} - }
}}: }
}. }: }

可以用of替代in作為分隔符

當v-for和v-if在同一節點一起使用時，v-for的優先順序比v-if更高。

v-model其實也是乙個特殊的語法糖，其實實現的資料雙向繫結也可用v-bind和v-on實現，但v-model在不同表單上會有更加智慧型的處理。

經典的使用案例是對、message is: }

對於單選按鈕，核取方塊及選擇框的選項，v-model配合 vue 例項的資料作為value屬性值實現不同效果，即會忽略所有表單元素的 value、checked、selected 特性的值。

one
twopicked: }
jack
john
checked: }

v-model的修飾符的使用限制在、、和元件。

這三個指令的共同點是無需表示式，用法如下：

}}
}標籤 -->
}

繼續加油鴨~ 少年！

Vue 通過自定義指令回顧 v 內建指令

Vue011 內建指令與自定義指令

Vue自定義指令

vue自定義指令

Vue 通過自定義指令回顧 v 內建指令

Vue011 內建指令與自定義指令

Vue自定義指令

vue自定義指令

相關推薦