一、vue自定义指令包括4部分：指令名称、参数、修饰符、表达式
v-dire:arg.e="expression"
指令名称:参数.修饰符="表达式"
二、自定义指令有全局注册指令、局部注册指令。全局注册指令又分函数注册形式、对象注册形式。
全局注册指令，使用Vue的directive函数实现
函数注册形式示例:
Vue.directive('dire',function(el,bindings,vnode){
console.log("自定义指令");
});
参数说明：
dire 指令名称
el 当前绑定的dom元素
bindings 指令解析后的结果，包括指令名称、参数、表达式等，bindings.vaule返回的是表达式
vnode 对应的虚拟dom
对象注册形式示例:
Vue.directive('dire',{
bind:function(el,bindings,vnode){
console.log("bind--最先执行的钩子函数");
},
inserted:function(el,bindings,vnode){
console.log("inserted--在bind后面执行");
},
update:function(el,bindings,vnode){
console.log("update--绑定组件更新前触发执行");
},
componentUpdated:function(el,bindings,vnode){
console.log("componentUpdated--绑定组件更新后触发执行");
},
unbind:function(el,bindings,vnode){
console.log("componentUpdated--组件销毁前触发执行");
}
});
局部注册指令示例：
var vm = new Vue({
el:'#app',
data:{
x:0
},
directives:{ //指令局部注册
dire:{ //dire指令名称
bind:function(el,bindings,vnode){
console.log("bind--最先执行的钩子函数");
},
inserted:function(el,bindings,vnode){
console.log("inserted--在bind后面执行");
},
update:function(el,bindings,vnode){
console.log("update--绑定组件更新前触发执行");
},
componentUpdated:function(el,bindings,vnode){
console.log("componentUpdated--绑定组件更新后触发执行");
},
unbind:function(el,bindings,vnode){
console.log("componentUpdated--组件销毁前触发执行");
}
}
}
});
下面用vue实现一个弹出对话框的指令，步骤如下：
1、使用Vue的directive函数实现自定义指令，放在文件dire.js中，代码如下：
Vue.directive('dire',function(el,bindings,vnode){
console.log("el:");
console.log(el);
console.log("bindings:");
console.log(bindings);
console.log("vnode:");
console.log(vnode);
var value=bindings.value;//bindings.vaule返回的是第一点中的 表达式，该表达式是对象
var callback=value.callback;//表达式里的callback属性
var msg = value.msg;
callback.call(this,el,msg);//调用指令传进来的函数handleDire
});
2、在app.js文件里生成一个Vue对象，Vue对象的el属性绑定id=appDire的div元素
var one = new Vue({
el: "#appDire",
data: {},
methods: {
handleDire: function(el, value) {//该函数是作为自定义指令的表达式(作回调函数用)
alert(value);
}
}
});
3、实现index.html文件
1）引入vue.js，可引用本地，也可以引用网络的
2）引入dire.js
3）引入app.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="vue.js"></script>
<title>vueDire</title>
</head>
<body>
<div id="appDire">
<div v-dire:arg.e="{callback:handleDire,msg:'指令弹框'}"></div>
</div>
</body>
<script src="dire.js"></script>
<script src="app.js"></script>
</html>
这三四个文件放在同一个路径下，如下图：
运行结果：
f12打印值
扫一扫
1647
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
