Vue 自定义指令
Vue 自定义指令
https://vuejs.bootcss.com/guide/custom-directive.html
被调用时机
- 指令与元素成功绑定时（初始化时）
- 指令所在模板被重新解析时
函数式：
<!DOCTYPE html>
<html>
<head>
<meta lang="zh-cn">
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<h2><span v-big="n"></span></h2>
</div>
</body>
<script>
let vm = new Vue({
el: '#root',
data: {
n: 1,
},
directives: {
big(element, binding){
console.log('binding: ', binding);
console.dir('element: ', element);
console.log(this); // 注意：此处的this是window
element.innerText = binding.value * 10; // 此指令实现将数据放大10倍然后显示
}
}
});
</script>
</html> 
对象式：
定义一个 v-fbind 指令，和 v-bind 指令类似，但可以让所绑定的input元素默认获得焦点。
<!DOCTYPE html>
<html>
<head>
<meta lang="zh-cn">
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" v-fbind:value="n">
</div>
</body>
<script>
let vm = new Vue({
el: '#root',
data: {
n: 1,
},
directives: {
// fbind(element, binding){
// element.value = binding.value;
// element.focus(); // 无法实现获得焦点，因为在节点放入DOM树之前无法进行只有在DOM树上才能进行的操作
// // 第一次被调用是元素与指令成功绑定时，此时节点没放入DOM树，无法调用 focus。模板会先编译，再用指令处理，再放入DOM树
// // 之后再触发此指令时，可以成功获得焦点
// }
fbind:{
// 指令与元素绑定时
bind(element, binding){
element.value = binding.value;
},
// 元素插入页面时
inserted(element, binding){
element.focus();
},
// 指令所在模板被重新解析
update(element, binding){
element.value = binding.value;
element.focus();
},
// 还有 componentUpdated unbind 见vue文档
}
}
});
</script>
</html>
