Vue 知识点:自定义指令

7 篇文章 0 订阅

自定义指令-函数式:

需求:定义一个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>

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值