Vue中自定义指令的使用方法！

Posted 2022-11-20 webfy

        除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：(咳咳，借官网的用一用)

1、定义全局的自定义变量

main.js

Vue.directive(‘color‘,
  inserted(el)
//  各单位注意，这里的el获取的是标签元素，说白了就是可以直接操作DOM
    console.log(el)
    el.style.color = "red"
  
)

app.vue，这里直接写v-color就可以；

<div >前端伪大叔</div>
<div v-color>前端伪大叔</div>

 

 2、自定义指令中，添加属性；

Vue.directive(‘color‘,
  bind(el,binding)
    switch(binding.value)
      case ‘red‘:
        el.style.color = ‘red‘ 
        break;
      case ‘blue‘:
        el.style.color = ‘blue‘
        break;
    
  
)

App.vue

<div >前端伪大叔</div>
<div v-color="‘red‘">前端伪大叔</div>
<div v-color="‘blue‘">前端伪大叔</div>

        可以通过给自定义的属性，添加属性的方式来修改颜色；当然不仅仅只能修改颜色这么简单，因为el直接获得了DOM，所以你懂得！

 

3、组件内指令-只有自己组件可以使用

注意：directives是一个对象，里面定义的自定义指令也是对象！

//  template
<div >前端伪大叔</div>
<div v-color>前端伪大叔</div>

//  script
//  这里是对象
 directives: 
//  每个指令都是一个对象
   color:  
     inserted(el)
       el.style.color = ‘cyan‘
     
   
 

 

4、组件内的自定义指令，增加属性

//  template
<div v-color="‘red‘">前端伪大叔</div>
<div v-color="‘blue‘">前端伪大叔</div>
//  script
//  这里是对象
 directives:
//  每个指令都是一个对象
   color:
     bind(el,binding)
       if(binding.value == ‘red‘)
         el.style.color = ‘red‘
       else if (binding.value = ‘blue‘)
         el.style.color = ‘blue‘
       
     
   
 

 

给大家奉上地址：https://cn.vuejs.org/v2/guide/custom-directive.html

        如果大家喜欢的话，欢迎关注“前端伪大叔”我将为您不间断的分享前端学习知识！