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

自定义指令

自定义指令主要用于，除系统提供外，自己对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也是可以的。