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

Posted webfy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中自定义指令的使用方法!相关的知识,希望对你有一定的参考价值。

        除了核心功能默认内置的指令 (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

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

技术图片

 

以上是关于Vue中自定义指令的使用方法!的主要内容,如果未能解决你的问题,请参考以下文章

vue中自定义指令

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

vue2.0和vue3.0中自定义指令(directive)的区别

手把手教你在 Vue3 中自定义指令

vue基本使用

vue中自定义指令组件化生命周期节流和防抖获取DOMmint-ui简介过渡和动画