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
            }
        }
    }
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值