11-自定义指令
VUE中除了有内置指令还支持自定义指令
1.自定义指令——函数式
需求1:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。
<div id="root">
<h3>n的值为:<span v-text="n"></span></h3>
<!--将自定义指令v-big绑定在span元素上-->
<h3>n的值放大十倍为:<span v-big="n"></span></h3>
<button @click="n++">点我n+1</button>
</div>
想要自定义指令,我们就需要VUE中的一个directives属性
new Vue({
el:'#root',
data:{
n:1,
},
directives:{
big(){
console.log("big");
},
},
})
将自定义指令的基础设置好后,自定义指令的函数会带有两个形参,一个为所影响的DOM元素,一个为所绑定的数据
directives:{
// 函数式
big(element,binding){
// big函数何时会被调用?1.指令与元素成功绑定时(一上来),2.指令所在的模板被重新解析时。
console.log("big");
console.log(element);
console.log(binding);
console.log(binding.value);
console.log(element instanceof HTMLElement);//判断a是不是真实DOM
},
},
知道这个之后就可以实现我们需要的指令效果
directives:{
big(element,binding){
element.innerText=binding.value*10;
},
},
2.自定义指令——对象式
定义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input.元素默认获取焦点。
<div id="root">
<input type="text" v-fbind:value="n">
<button @click="n++">点我n+1</button>
</div>
对于这个需求我们不能使用函数式的自定义指令的定义方式,我们需要使用对象式完成
directives:{
fbind:{
// 指令与元素成功绑定时(一上来)
bind(element,binding){
element.value=binding.value;
console.log("bind");
},
// 指令所在元素被插入页面中时
inserted(element,binding){
element.focus();
console.log("inserted");
},
// 指令所在的模板被重新解析时
update(element,binding){
element.value=binding.value;
element.focus();
console.log("update");
},
},
},
3.自定义指令——总结
一、定义语法:
(1).局部指令:
new Vue({
directives:{指令名:配置对象}
})
new Vue({
directives(){指令名:回调函数
})
(2).全局指令:
Vue.directive(指令名,配置对象)
Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调:
(1).bind:指令与元素成功绑定时调用。
(2).inserted:指令所在元素被插入页面时调用。
(3).update:指令所在模板结构被重新解析时调用。
三、备注:
1.指令定义时不加v-,但使用时要加v-。
2.指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。
(3).update:指令所在模板结构被重新解析时调用。
三、备注:
1.指令定义时不加v-,但使用时要加v-。
2.指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名。