一、自定义指令总结
1、定义语法
① 局部指令
new Vue({
directives:{
指令名: 配置对象
}
});
或
new Vue({
directives:{
指令名: 回调函数
}
});
回调函数有弊端:回调函数相当于只写了配置对象中的.bind和.update回调
② 全局指令
Vue.directive(指令名,配置对象)
或
Vue.directive(指令名,回调函数)
2、配置对象中的常用的3个回调
① .bind
:指令与元素成功绑定时调用
② .inserted
:指令所在元素被插入页面时调用
③ .update
:指令所在模板结构被重新解析时调用(不是指令所用到的数据发生更新时)
3、注意点
① 指令定义时不加v-,但是使用时要加v-
② 指令名如果是多个单次,要使用kebab-case命名方式,不要使用camelCase命名
二、封装一个类似于v-bind的自定义指令
需求:做一个类似于v-bind的指令v-fbind
1、自定义指令v-fbind
directives: {
fbind: {
bind(element, binding) {
element.value = binding.value;
},
},
inserted(element) {
element.focus();
},
updated(element, binding) {
element.value = binding.value;
},
},
2、页面中绑定指令v-fbind
<div id="app">
<input type="text" v-fbind:value="sex" />
</div>
3、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-fbind:value="sex" />
</div>
<script>
new Vue({
el: "#app",
data: {
sex: "男",
},
directives: {
fbind: {
bind(element, binding) {
element.value = binding.value;
},
},
inserted(element) {
element.focus();
},
updated(element, binding) {
element.value = binding.value;
},
},
});
</script>
</body>
</html>