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就可以;

前端伪大叔
前端伪大叔

 

 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

前端伪大叔
前端伪大叔
前端伪大叔

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

 

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

注意:directives是一个对象,里面定义的自定义指令也是对象!

//  template
前端伪大叔
前端伪大叔
// script // 这里是对象 directives:{ // 每个指令都是一个对象 color:{ inserted(el){ el.style.color = 'cyan' } } }

 

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

//  template
前端伪大叔
前端伪大叔
// 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中自定义指令的使用方法!_第1张图片

 

你可能感兴趣的:(Vue中自定义指令的使用方法!)