学习笔记:Vue——自定义指令
在Vue2.0中,代码复用和抽象的主要形式是组件。然鹅,有的情况下,你仍然需要对普通DOM元素进行底层操作,这时候就会用到自定义指令。
1.举个聚焦输入框的例子,全局注册focus指令
Vue.directive('focus', { inserted: function (el) { el.focus() } })
在模板中任何元素上使用自定义的指令 v-focus属性,如下:
<input v-focus />
当页面加载时,该元素将获得焦点(注意:autofocus在移动版Safari上不工作)
2.自定义指令的各种钩子函数
- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
- inserted:被绑定元素插入父节点时调用
- ...
3.钩子函数参数
- el:指令所绑定的元素,可以用来直接操作DOM
- binding:一个对象,包含以下属性:
- name:指令名
- value:指令的绑定值
- oldValue:指令绑定的前一个值(尽在update和componentUpdated钩子中可用)
- expression:字符串形式的指令表达式
- arg:传给指令的参数
- modifiers:一个包含修饰符的对象
- vnode:Vue编译生成的虚拟节点。VNode API
- oldVnode:上一个虚拟节点
4.完整的自定义指令样例:
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }) new Vue({ el: '#hook-arguments-example', data: { message: 'hello!' } })
(完)
参考:Vue官方文档——自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html