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');
    // 我们可以获取到我们这个输入框
    
  }
})

效果图:
vue自定义指令的使用(directive)_第1张图片

使用自定义指令的好处 就是说我们不需要在每个页面给输入框这个事件,我们只需要全局的去注册 直接在页面上用 v-"自定义事件名“ 绑定来使用就可以了

你可能感兴趣的:(vue,自定义指令)