Vue2.0笔记——自定义指令

Posted 2020-10-31

自定义指令

自定义指令主要用于，除系统提供外，自己对DOM的底层操作。
例如当页面加载时需要将一个文本框为自动获得焦点。只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。

我们通过全局自定义指令和局部自定义指令来讲解autofouce案例。

全局自定义指令

在全局API中通过Vue.directive( id, [definition] )来注册或获取全局指令。
参数:

• id表示自定义的指令名称
• definition为自定义指令的定义，一般可以含有几个生命周期钩子函数
• bind() 指令第一次绑定到元素上时调用，且只调用一次，可执行初始化操作
• inserted() 被绑定元素插入到DOM时调用
• update() 被绑定元素所在模板更新时调用
• componentUpdated() 被绑定元素所在模板完成一次更新周期时调用
• unbind() 指令与元素解绑时调用，只调用一次

bind与inserted在加载页面初始化实例并挂载之后调用
update，componentUpdated 当指令所绑定的元素模板更新时调用
unbind解绑时调用

语法:

// 注册
Vue.directive(‘my-directive‘, {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注册 (指令函数)
Vue.directive(‘my-directive‘, function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter，返回已注册的指令
var myDirective = Vue.directive(‘my-directive‘)

示例:

//el参数为绑定的元素，自动载入
Vue.directive(‘focus‘,{
    inserted:function(el){
        console.log(el);
        el.focus();
    }
});

<div id="app">
    <input type="text" v-focus>
</div>

2.当然，你也可以使用简单的指令函数。

// 注册 (指令函数)
Vue.directive(‘my-directive‘, function () {
  // 这里将会被 `bind` 和 `update` 调用
})

3.我们可以在bind函数中为其添加两个参数，第一个是绑定的元素，第二个是当前自定义指令对象。

Vue.directive(‘focus‘,{
    bind(el,binding){
        console.log(binding);
    }
});

局部，实例的自定义指令

局部的自定义指令定义在directives选项中，所配置的数据与全局的完全一样。

directives:{
    focus:{
        inserted(el){ //当被绑定元素插入到DOM的时候，进行自动获焦
        el.focus();
    }
}

focus即为指令名称，使用时直接，v-focus即可。

el参数和binding参数，获得绑定元素与当前指令对象只有在bind函数绑定之后才能得到值。所以inserted，update也是可以的。