自定义指令
B站教学视频笔记
- 当自定义指令名由多个单词组成时,采用 - 链接,不能使用驼峰命名,函数处将名称写完整 ‘XXX’
- 指令函数中的 this 都指向 Window
- 指令仅可当前 Vue 对象使用
- 指令定义时不加 v- ,但使用时加 v-
//定义一个v-big指令,将绑定数值放大10倍
//定义一个v-fbind指令,将所绑定input元素默认获取焦点
<span v-big='n'></span>
<input type='text' v-fbind:value='n'>
//该指令函数为全局可用
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函数何时会被调用?1.指令与元素成功绑定时。2.指令所在模板被重新解析时。
big(element,binding){//element为真实dom元素(此处为span)
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
}
}
}
})