自定义指令-函数式:
需求:定义一个v-big指令,和v-text功能相似,但会把绑定的数值放大10倍。
//容器
<div id="root">
<h2>当前的数值是:<span v-text="n"></span></h2>
<h2>放大10倍后的数值是:<span v-big="n"></span></h2>
<button @click="n++"></button>
</div>
<script>
new Vue({
el:"#root",
data:{
n:1,
},
directives:{
`big函数何时会被调用:
1.指令与元素成功绑定时。
2.指令所在的模版被重新解析时。`
big(element,binding){
console.log("big")
element.innerText = binding.value * 10
}
}
})
</script>
自定义指令-对象式:
需求:定义一个v-fbind指令,和v-bind功能相似,但可以让其所绑定的input元素默认获取焦点。
//容器
<div id="root">
<input type="text" v-fbind:value="n"/>
<button @click="n++"></button>
</div>
<script>
new Vue({
el:"#root",
data:{
n:1,
},
directives:{
fbind:{
`指令与元素成功绑定时`
bind(element,binding){
element.value = binding.value
},
`指令所在元素被插入页面时`
inserted(element,binding){
element.focus()
},
`指令所在的模版被重新解析时`
update(element,binding){
element.value = binding.value
}
}
}
})
</script>
自定义指令-总结:
1.关于自定义指令出现多个单词时,用“-”线分隔,但是在命名方法时,记得加上引号,不能使用简写形式:
示例如下:
v-bigNumber(no) v-big-number(yes)
v-big-number(element,binding)(no) 'v-big-number'(element,binding)(yes)
2.所有directives里的方法所指向的this都是window
3.directives里的指令怎么变成全局指令
<script>
//定义全局指令(函数式)
Vue.directive('big',function(element,binding){
console.log("big")
element.innerText = binding.value * 10
})
//定义全局指令(对象式)
Vue.directive('fbind',{
`指令与元素成功绑定时`
bind(element,binding){
element.value = binding.value
},
`指令所在元素被插入页面时`
inserted(element,binding){
element.focus()
},
`指令所在的模版被重新解析时`
update(element,binding){
element.value = binding.value
}
})
new Vue({
el:"#root",
data:{
n:1,
},
//定义局部指令
directives:{
//函数式
big(element,binding){
console.log("big")
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>