vue自定义指令的使用（directive）

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