自定义指令好处很多，有时候很多简单的功能形不成方法，但是调用的地方有很多，这时候使用自定义指令其实是一个不错的选择，下面就是一个简单的自定义指令实现一个倒置时：
看图
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<button v-countdown='5'>click</button>
<br/>
</div>
</body>
<script>
function countdownTime(binding) {
let time = binding.value || 10;
let timer = setInterval(function () {
if (time > 1) {
--time;
binding.elm.innerHTML = "倒置时还有：" + time + "（秒）";
} else {
binding.elm.innerHTML = "click";
clearInterval(timer);
}
},1000);
}
Vue.directive('countdown',{
bind(el,vnode,binding) {
el.addEventListener("click",function () {
countdownTime(binding);
});
},unbind(el,binding) {
el.removeEventListener("click",countdownTime(binding));
}
});
var vm = new Vue({
el: "#app",});
</script>
</html>
api说明：
- bind 只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性初始化设置
- inserted 被绑定元素插入福接单是调用（仅保证父节点存在，但不一定已被插入文档中）
- update 所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前，指令的值可能发生了改变，也可能没有，但是可以通用比较更新前后的值来忽略不必要的模板更新
- componentUpdated 指令所在组件的VNode及其子VNode全部跟新后调用
- unbind 值调用一次，指令与元素解绑时调用
github地址：https://github.com/wqb2017/my...
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。