自定义指令

一.私有自定义指令

1.私有指令

1.methods中需要添加directives

2.定义名为color的指令

3.bind绑定到dom对象

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

4.template标签中

在指令前需要加v-

<template>
  <div class="app-container">
    <h1 v-color>App根组件</h1>
    <h1 v-color>测试啊</h1>
   </div>
</template>

2.私有指令绑定的值

1.data中定义一个color值

 data() {
    return {
      // 用来存储购物车的列表数据，默认为空数组
      list: [],
      color:'blue'
    };
  },

2. 绑定值

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

3.DOM传值

<template>
  <div class="app-container">
    <h1 v-color="color">App根组件</h1>
    <h1 v-color ="'red'">测试啊</h1>
 </template>

update

因为bing只在第一次时触发，当更新后是无法生效的，此时就需要

update

案例:点击切换颜色

 <button @click="changeColor">改变颜色</button>

data定义

data() {
    return {
      // 用来存储购物车的列表数据，默认为空数组
      list: [],
      color: "blue",
    };
  },

directives

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

template

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

二.全局自定义指令

main.js

// 定义全局过滤器
// 1.
// Vue.directive('color', {
//   bind(el, binding) {
//     el.style.color = binding.value
//   },
//   update(el, binding) {
//     el.style.color = binding.value
//   }
// })
// 2.简写
Vue.directive('color', function (el, binding) {
  el.style.color = binding.value
})