<!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>自定义指令</title>
</head>
<body>
<div id="root">
<!-- 1：定义一个v-big指令，和v-text类似，只是把内容放大10倍 -->
<!-- 2： 定义一个v-fbind指令，和v-bind类似，可以让input默认获取焦点-->
<h2>当前的n值是：<span v-text="n"></span></h2>
<h2>放大10倍后的n值是:<span v-big-number="n"></span></h2>
<button @click="n++">点我n+1</button>
<input type="text" v-fbind:value="n">
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
// 全局
//Vue.directive('xxx',function(){})
const vm = new Vue({
el: '#root',
data: {
n: 1
},
directives: {
'big-number'(element, binding) {
//注意此处的this为window
//big函数何时调用：1指令和元素成功绑定时2：指令所在的模板被重新解析。
// element是真实dom。
console.log(element instanceof HTMLElement);
element.innerText = binding.value * 10;
},
fbind: {
//指令与元素绑定（一上来）
bind(element, binding) {
element.value = binding.value;
},
//指令所在的元素被插入页面
inserted(element, binding) {
element.focus();
},
//指令所在的模板被重新解析
update(element, binding) {
element.value = binding.value;
}
}
}
})
</script>
</body>
</html>
知识点
1：局部指令
new Vue({
directives:{指令名，配置对象}
})
new Vue({
directives:{指令名，回调函数}
})
2：全局指令
Vue.directive(指令名，配置对象)
Vue.directive(指令名，回调函数)
3：配置对象中常用的三个回调
①：bind：指令与元素成功绑定时。
②：inserted：指令所在的元素被插入页面时。
③：update ：指令所在的模板被重新解析时。
4：定义指令时不加v-,使用时加v-。
5：指令名是多个单词时，要使用kebab-case的格式，不要使用camelCase。函数名需要加上引号。
网友评论