寫在前面： 我是「揚帆向海」，這個暱稱來源於我的名字以及女朋友的名字。我熱愛技術、熱愛開源、熱愛編程。
技術是開源的、知識是共享的。
這博客是對自己學習的一點點總結及記錄，如果您對 Java、算法 感興趣，可以關注我的動態，我們一起學習。
用知識改變命運，讓我們的家人過上更好的生活。
一、vue中內置的指令
v-text 指令用於將數據填充到標籤中，作用和插值表達式類似，但是不會出現閃動問題。
v-html 指令用於將HTML片段填充到標籤中，可能有安全問題。
v-pre 指令用於顯示原始信息。
v-once 指令是隻渲染一次，後面元素中的數據再更新變化，都不會重新渲染。
v-for 指令用於遍歷，把一個數組對應爲一組元素。
v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。指令簡寫爲 @
v-bind 指令用於屬性綁定,把數據綁定在HTML元素的屬性上，指令簡寫爲 : 要綁定的屬性。
v-model 指令可以實現表單元素和 Model 中數據的雙向數據綁定。
v-if & v-else-if & v-else 指令用於條件渲染。
v-if & v-show 指令用於隱藏和顯示元素
v-if的特點：每次都會重新刪除或創建元素
v-show的特點： 每次不會重新進行DOM的刪除和創建操作，只是切換了元素的 display:none 樣式
注意：
① 如果元素涉及到頻繁的切換，最好不要使用 v-if 指令, 應該選擇使用 v-show 指令；
② 如果元素可能一直不會被顯示出來被用戶看到，則選擇使用 v-if 指令
二、vue中自定義指令
在 Vue2.0 中，代碼複用和抽象的主要形式是組件。然而，有的情況下，開發人員仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。
1. 自定義全局指令
註冊一個 v-focus 指令，實現了在頁面加載完成之後自動讓輸入框獲取到焦點的小功能。
<!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>頁面載入時，input 元素自動獲取焦點：</p>
<input type="text" placeholder="我是全局自定義指令" v-focus>
</div>
<script>
// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當被綁定的元素插入到 dom 中時…… ，其中參數 el 爲dom元素
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
var vm = new Vue({
el: '#app',
data: {}
})
</script>
</body>
</html>
只要打開這個頁面後還沒點擊過任何內容，這個輸入框就應當還是處於聚焦狀態。
效果演示：
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'
},
// 註冊一個局部自定義指令 `v-color`
directives: {
color: {
// binding 爲自定義的函數形參,通過自定義屬性傳遞過來的值,存到 binding.value 裏面
bind: function (el, binding) {
// 根據指令的參數進行設置背景色
el.style.backgroundColor = binding.value
}
}
}
})
</script>
</body>
</html>
只要通過指令綁定給了元素，不管元素有沒有被插入到頁面中去，這個元素肯定會有一個內聯樣式.
效果演示：
注意：
- 和JS行爲有關的操作，一般在 inserted 中去執行；
- 和樣式有關的操作，一般在 bind 執行
3. 鉤子函數
① 指令定義對象可以提供如下幾個鉤子函數 (均爲可選)：
| 鉤子函數 | 使用 |
|---|---|
| bind | 只調用一次，指令第一次綁定到元素時調用。在這裏可以進行一次性的初始化設置。 |
| inserted | 被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。 |
| update | 所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 。 |
| componentUpdated | 指令所在組件的 VNode 及其子 VNode 全部更新後調用。 |
| unbind | 只調用一次，指令與元素解綁時調用。 |
② 指令鉤子函數會被傳入以下參數：
| 參數 | 說明 |
|---|---|
| el | 指令所綁定的元素，可以用來直接操作 DOM。 |
| binding | 綁定一個對象。 |
| vnode | Vue 編譯生成的虛擬節點。 |
| oldVnode | 上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。 |
③ 綁定對象屬性說明：
| 屬性 | 說明 | 示例 |
|---|---|---|
| name | 指令名，不包含前綴 v-。 | v-focus 中的 focus。 |
| value | 指令的綁定的值（計算後）。 | v-my-directive=“1 + 1” 中，綁定值爲 2。 |
| oldValue | 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。 | —— |
| expression | 字符串形式的指令表達式（不計算）。 | v-my-directive=“1 + 1” 中，表達式爲 “1 + 1”。 |
| arg | 傳給指令的參數，可選。 | v-my-directive:foo 中，參數爲 “foo”。 |
| modifiers | 一個包含修飾符的對象。 | v-my-directive.foo.bar 中，修飾符對象爲 { foo: true, bar: true }。 |
由於水平有限，博客中難免會有一些錯誤，有紕漏之處懇請各位大佬不吝賜教！