第九十二篇：Vue 自定义指令

好家伙，

 

1.什么是自定义指令？

 

vue官方提供了v-text，v-for，v-model，v-if等常用的指令。除此之外vue还允许开发者自定义指令。

 

2.自定义指令的分类

 

vue中的自定义指令分为两类,分别是:

~私有自定义指令

~全局自定义指令

 

 

3,私有自定义指令

在每个vue组件中,可以再directives节点下声明私有自定义指令,示例代码如下:

 

需求来了:

非常简单,我要去改h1标签的颜色,怎么改?

 

3.1.我们来试着自定义一个自定义指令:

在App.vue组件中:

<h1 v-color>App根组件</h1>

对v-color指令进行配置:

//私有自定义指令的节点
  directives:{
    //定义一个名字为color的的指令,指向一个配置对象
    color:{}
  },

这里我们会用到bind函数

directives:{
    //定义一个名字为color的的指令,指向一个配置对象
    color:{
      //当当指令第一次被绑定到元素上的时候,会立即触发bind函数
      //形参中的el表示当前指令所绑定到的那个DOM对象
      bind:function(el){
        console.log('我被触发了')
        el.style.color='red'
      }
    }
  },

于是我们一进页面就可以看到一个红色的h1

 

 

3.2.我们还有另外的写法:

<h1 v-color="color">App根组件2</h1>

来进行配置:

data(){
    return{
      comName:'Left',
      color:'blue'
    }
  },

  directives:{
  
    color:{
     //el拿到,
      bind:function(el,binding){
        console.log('我被触发了')
        console.log(binding)
        el.style.color = binding.value
      }
    }
  },

来看看看binding里面的是些啥

 

 所以binding拿到的是color

所以我们可以通过:

el.style.color = binding.value

去改h1的颜色

 

3.3.两者的不同之处

 <h1 v-color="color">App根组件</h1>
    <h1 v-color="'red'">App根组件2</h1>

去浏览器里面看看binding里的是啥

 

 

 

 可以看到'red'只是一个表达式

 

4.update函数:

bind函数只调用一次:

单指令第一次绑定到元素时调用,当DOM更新是bind函数不会触发.

update函数会在每次DOM更新时被调用.

 

我们又又又来尝试一下:

来实现一个按钮点击改颜色

 

例子如下:

<template>
  <div>
    <h1 v-color>App根组件</h1>
    <h1 v-color="color">App根组件2</h1>
    <h1 v-color="'red'">App根组件3</h1>
    <button @click="color='green'">改变颜色</button>
    
  </div>
</template>

<script>
//1.导入需要的组件
import Left from './components/Left.vue'
import Right from './components/Right.vue'
import Article from './components/Article.vue'

export default {
  data(){
    return{
      comName:'Left',
      color:'blue'
    }
  },
  //私有自定义指令的节点
  directives:{
    //定义一个名字为color的的指令,指向一个配置对象
    color:{
      //当当指令第一次被绑定到元素上的时候,会立即触发bind函数
      //形参中的el表示当前指令所绑定到的那个DOM对象
      bind:function(el,binding){
        console.log('被触发了bind函数')
        console.log(binding)
        el.style.color = binding.value
      },
      //在DOM更新的时候,会触发update函数
      update(el,binding){
        console.log('被触发了update函数')
        console.log(binding)
        el.style.color = binding.value

      }
    }
  },
     
}
</script>

 

 

 嗯,搞定

 

5.简写

如果bind和update函数中的逻辑完全相同,则对象格式的自定义指令可以简写成函数形式:

directives:{
    //定义一个名字为color的的指令,指向一个配置对象
    // color:{
    //   //当当指令第一次被绑定到元素上的时候,会立即触发bind函数
    //   //形参中的el表示当前指令所绑定到的那个DOM对象
    //   bind:function(el,binding){
    //     console.log('被触发了bind函数')
    //     console.log(binding)
    //     el.style.color = binding.value
    //   },
    //   //在DOM更新的时候,会触发update函数
    //   update(el,binding){
    //     console.log('被触发了update函数')
    //     console.log(binding)
    //     el.style.color = binding.value

    //   }
    // }
    color(el,binding){
      el.style.color = binding.value
    }
  },

下方为缩写(妙啊)

6.注册全局自定义指令

 

我们来到main.js中

Vue.directive('color',function(el,binding){
  el.style.color = binding.value
})

搞定

 

 

That's all