vue自定義指令的使用：
全局指令和局部指令：
- 【全局指令】 使用Vue.diretive()來全局註冊指令。
- 【 局部指令】 也可以註冊局部指令，組件或Vue構造函數中接受一個directives的選項。
- 鉤子函數。指令定義函數提供了幾個鉤子函數（可選）。
- 【bind】 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個 在綁定時執行一次的初始化動作。
- 【inserted】 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於d ocument中）。
- 【 update】 所在組件的VNode更新時調用，但是可能發生在其孩子的VNode更新之前 。指令的值可能發生了改變也可能沒有。但是可以通過比較更新前後的值來忽 略不必要的模板更新。
- 【componentUpdated】 所在組件的VNode及其孩子的VNode全部更新時調用。
- 【 unbind】 只調用一次，指令與元素解綁時調用。 鉤子函數參數
鉤子函數被賦予了以下參數
【el】 指令所綁定的元素，可以用來直接操作DOM。
【 binding】 一個對象，包含以下屬性： name:指令名，不包括v-前綴。 value:指令的綁定值，例如：v-my-directive=“1+1”,value的值是2。 oldValue:指令綁定的前一個值，僅在update和componentUpdated鉤子中 可用。無論值是否改變都可用。 expression:綁定值的字符串形式。例如v-my-directive=“1+1”，expression 的值是"1+1"。 arg:傳給指令的參數。例如v-my-directive:foo，arg的值是"foo"。 modifiers:一個包含修飾符的對象。
比如說：輸入框光標跳動。
有三個方法：
1.通過ref來獲取。
<div>
<input type="text" name="" id="" placeholder="請輸入" ref="userName">
</div>
methods:{
getFoucs(){
this.$refs.userName.focus();
}
},
mounted(){
this.getFoucs()
}
2.全局自定義指令來使用：
組件中：
//我們直接用v-focus 就可以調用這個方法
<div>
<input type="text" name id placeholder="請輸入" v-focus/>
</div>
在main.js
Vue.directive('focus',{
inserted: function(el,binding){
//el:指令綁定的元素
//binding.name指令名 binding.value綁定值 bingding.expression綁定至(字符串形式)
el.focus(); //拿到輸入框後讓他獲取光標跳動
console.log(el,'1111');
// 我們可以獲取到我們這個輸入框
}
})
效果圖：
使用自定義指令的好處 就是說我們不需要在每個頁面給輸入框這個事件，我們只需要全局的去註冊 直接在頁面上用 v-"自定義事件名“ 綁定來使用就可以了