Vue快速入门(三：自定义指令)《快乐Vue》
程序员文章站
2022-05-15 13:40:02
...
自定义指令
除了内置指令外，Vue.js 也提供了方法让我们可以注册自定义指令，以便封装对 DOM元素的重的处理行为，提高代码复用率。
指令注册及定义对象
通过 Vue.directive(id, definition) 注册一个全局的自定义指令，接收参数 id 和定义的对象。
id：指令的而唯一标识。
definition：指令的相关属性及钩子函数。
我们在注册指令的同时，可以传入 definition 定义对象，对指令赋予一些特殊的功能。这个定义对象主要包含三个钩子函数：bind、 update 和 unbind。
bind：指令第一次绑定到元素上时调用，只调用一次。
update：指令在bind之后以初始值为参数进行第一次调用，之后每次当绑定的值发生变化时被调用，update接收到的参数为newValue和oldValue。
示例：
<!DOCTYPE html>
<html>
<head>
<title>v-diycommand</title>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<div v-globaldirective="arg"></div>
<div v-globaldirective2></div>
</div>
<script type="text/javascript">
Vue.directive('globaldirective', {
bind: function () {
console.log("调用了====>bind")
console.log("bind", arguments)
},
update: function (newValue, oldValue) {
alert("调用了====>update")
console.log("update", newValue, oldValue)
},
unbind: function () {
console.log("调用了====>unbind")
console.log("unbind", arguments)
}
})
Vue.directive('globaldirective2', function(){
alert("调用了====>globaldirective2")
})
var vm = new Vue({
el: "#app",
data:{
arg: "mydirective"
}
});
</script>
</body>
</html>
控制台修改arg的值，即可触发update
转载于:https://www.jianshu.com/p/00c54bf8f037
上一篇： vue中基本的品牌案例增删改查
下一篇： Vue基础系列：添加自定义指令