Vue自定义指令

自定义指令

B站教学视频笔记

1. 当自定义指令名由多个单词组成时，采用 - 链接，不能使用驼峰命名，函数处将名称写完整 ‘XXX’
2. 指令函数中的 this 都指向 Window
3. 指令仅可当前 Vue 对象使用
4. 指令定义时不加 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
            }
        }
    }
})