Vue自定义指令方法

一、私有自定义指令

        通过directives指令定义私有自定义方法

<template>
  <div class="app">
    <h2>自定义指令的用法</h2>
    <!-- v-自定义方法名称 -->
    <p v-color="col">测试自定义指令是否生效</p>
    <button @click="color = 'green'">改变字体颜色</button>
  </div>
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      col: "red",
    };
  },
  // 私有自定义指令
  directives: {

    // color: {
    //   // 指令的生命周期函数和组件的生命周期类似
    //   created() {
    //     console.log("created");
    //   },
    //   beforeMount() {
    //     console.log("beforeMount");
    //   },
    // 有四个参数；el表示当前绑定到的元素  binding是一个对象里面有指令传过来的值 其他两个参数百度一下就知道了
    //   mounted(el, binding) {
    //     console.log(el, binding);
            //改变字体颜色
    //     el.style.color = binding.value;
    //   },
    //   beforeUpdate() {
    //     console.log("beforeUpdate");
    //   },
    //   updated(el, binding) {
    //     console.log("updated");
            //数据发生变化的时候调用
    //     el.style.color = binding.value;
    //   },
    //   beforeUnmount() {
    //     console.log("beforeUnmount");
    //   },
    //   unmounted() {
    //     console.log("unmounted");
    //   },
    // },

    // 当mounted和updated中逻辑一样时可以简写成函数模式
    color(el, binding) {
      // 这将会在mounted和updated时调用
      el.style.color = binding.value;
    },
  },
};
</script>

<style>

</style>

二、全局自定义指令

        在main.js文件中定义

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 全局自定义指令
app.directive("color",(el,binding)=>{
  el.style.color = binding.value;
})
app.mount('#app')

 在其他组件中就可以正常使用啦

<template>
    <div class="app">
      <h2 ref="myh2" v-color="'blue'">app根组件</h2>
    </div>
</template>

<script type="text/ecmascript-6">

export default {
  name:'MyApp',
    data () {
        return {}
    },
    
}
</script>