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-"自定义事件名“ 绑定来使用就可以了