- 自定义指令概述
自定义指令使用来操作Dom的,且可复用。其分为全局指令和局部指令。
全局指令定义语法如下:
Vue.directive("指令id",{
//当指令第一次绑定到元素上时调用,只调用一次,可以用来执行初始化操作
//即:指令绑定到元素
bind: function(){
alert("bind");
},
//被绑定有自定义指令的元素被插入到Dom中时调用
inserted: function(){
alert("insert");
},
//被绑定元素在模板更新时调用
update: function(){
alert("update");
},
//被绑定元素在模板完成一次更新时调用
componentUpdated: function(){
alert('componentUpdated');
},
//指令和元素解绑时调用:只执行一次!!!
unbind: function(){
alert("unbind");
}
})
示例:页面上的输入框直接获取焦点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关于组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>页面上的输入框直接获取焦点</p>
<input type="text" v-focus>
</div>
</body>
<script>
Vue.directive('focus',{
//将元素插入到dom后中执行钩子函数insert
inserted: function(el){
//el是指当前指令绑定的dom元素
el.focus();
}
})
new Vue({
el: '#app'
})
</script>
</html>
自定义局部指令:在Vue实例中使用directives选项注册局部指令,语法如下:
new Vue({
el: '#app',
directives: {
//定义局部指令
}
})
- 钩子函数
一个指令的定义对象可以提供五种可选的钩子函数:bind, inserted, update, componentUpdated, unbind。钩子函数的参数如下:
(1)el:指令绑定的元素,可以直接来操作dom。
(2)binding:一个包含name,value等属性的对象。
(3)vnode:Vue编译生成的虚拟节点。
(4)oldVnode:上一个虚拟节点,仅在update和componentUpdated钩子中可用。
当不需要其他钩子函数时,可以简写为:
Vue.directive("指令ID",function(el,binding){
//函数操作
})
- 对象字面量
如果指令需要多个值,可以传入一个Javascript对象字面量,其又称为映射,是键值对的集合。它的语法是用一对大括号包着用逗号分隔的键值对,其中键和值分别用单引号括起来,键和值之间用冒号连接。