Vue自定義指令
語法：
Vue.directive('focus', {
bind: function (el) {},
inserted: function (el) {},
updated: function (el) { }
})
注意： Vue中所有的指令，在調用的時候，都以 v- 開頭
使用 Vue.directive() 定義全局的指令 v-focus
// 其中：參數1 ： 指令的名稱，注意，在定義的時候，指令的名稱前面，不需要加 v- 前綴,
// 但是： 在調用的時候，必須 在指令名稱前 加上 v- 前綴來進行調用
// 參數2： 是一個對象，這個對象身上，有一些指令相關的函數，這些函數可以在特定的階段，執行相關的操作
1.效果實現
定義全局指令:v-focus
// 定義全局的指令 v-focus
// 使用 Vue.directive() 定義全局的指令 v-focus
// 其中：參數1 ： 指令的名稱，注意，在定義的時候，指令的名稱前面，不需要加 v- 前綴,
// 但是： 在調用的時候，必須 在指令名稱前 加上 v- 前綴來進行調用
// 參數2： 是一個對象，這個對象身上，有一些指令相關的函數，這些函數可以在特定的階段，執行相關的操作
Vue.directive('focus', {
bind: function (el) { // 每當指令綁定到元素上的時候，會立即執行這個 bind 函數，只執行一次
// 注意： 在每個 函數中，第一個參數，永遠是 el ，表示 被綁定了指令的那個元素，這個 el 參數，是一個原生的JS對象
// 在元素 剛綁定了指令的時候，還沒有 插入到 DOM中去，這時候，調用 focus 方法沒有作用
// 因爲，一個元素，只有插入DOM之後，才能獲取焦點
// el.focus()
},
inserted: function (el) { // inserted 表示元素 插入到DOM中的時候，會執行 inserted 函數【觸發1次】
el.focus()
// 和JS行爲有關的操作，最好在 inserted 中去執行，放置 JS行爲不生效
},
updated: function (el) { // 當VNode更新的時候，會執行 updated， 可能會觸發多次
}
})
使用v-focus指令
效果
我們可以看到刷新後搜索框獲取到了焦點，說明我們創建的v-focus生效了，但是大家肯定也有很多疑問，我們來一一解釋下。
指令名稱
Vue中所有的指令，在調用的時候，都以 v- 開頭,然後在定義的時候我們不用添加v-前綴。
Vue.directive('focus', {
bind: function (el) { },
inserted: function (el) {},
updated: function (el) {}
})
參數方法
然後就是我們在定義v-focus指令的時候的第二個參數是一個對象，這個對象身上，有一些指令相關的函數，這些函數可以在特定的階段，執行相關的操作，那麼這幾個方法分別是什麼含義呢？如下
方法的參數值
我們調用的bind方法或者inserted方法的參數值是怎麼設置的。
第一個參數，永遠是el ，表示被綁定了指令的那個元素，這個el參數，是一個原生的JS對象
第二個參數，binding：一個對象，包含以下屬性
什麼場景下調用什麼方法
上面介紹的各個方法在什麼場景下調用呢？記住如下原則即可。
- 和樣式相關的操作，一般都可以在 bind 執行
- 和JS行爲有關的操作，最好在 inserted 中去執行
小案例
添加一個設置顏色屬性的指令v-color
效果：
傳參使用
我們系統指令能夠動態的接收數據來改變
<input type="text" v-model="keywords" id="search" v-focus v-color="'green'">
Vue.directive('color', {
// 樣式，只要通過指令綁定給了元素，不管這個元素有沒有被插入到頁面中去，這個元素肯定有了一個內聯的樣式
// 將來元素肯定會顯示到頁面中，這時候，瀏覽器的渲染引擎必然會解析樣式，應用給這個元素
bind: function (el, binding) {
// el.style.color = 'red'
// console.log(binding.name)
// 和樣式相關的操作，一般都可以在 bind 執行
// console.log(binding.value)
// console.log(binding.expression)
el.style.color = binding.value
}
})
效果：
自定義私有指令
和前面介紹的過濾器一樣，全局指令其他的vm對象都可以共享，我們也可以爲每個vm對象創建私有的指令，如下
<h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">{{ dt | dateFormat }}</h3>
directives: { // 自定義私有指令
'fontweight': { // 設置字體粗細的
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
//函數簡寫
//在很多時候，你可能想在 bind 和 update 時觸發相同行爲，而不關心其它的鉤子。
'fontsize': function (el, binding) { // 注意：這個 function 等同於 把 代碼寫到了 bind 和 update 中去
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
效果：
