Vue 自定义指令

0.bind指令第一次被绑定到元素上的时候,会立即触发bind 函数

一.自定义指令分两种:

image.png

一.一 私有自定义指令--bind中的第一个参数el

在组件内使用: directives

image.png

一.二具体的代码使用如下:

<template>
  <div id="app">
    <div class="title">
      <!-- 4.使用方式: -->
      <h1 v-color>App 根组件</h1>
      <hr />
    </div>
  </div>
</template>

<script>
import Left from "@/components/Left.vue";
export default {
  name: "App",
  data() {
    return {};
  },
  components: {
    Left,
  },

  // 1. 组件内的私有指令创建
  directives: {
    // 2. 定义一个名为color的指令,指向一个配置对象
    color: {
      // 3. 当v-color刚绑定到元素标签上,就会触发一个函数bind
      bind(el) {
        // 形参中的el 是绑定了此指令的原生 DOM 对象
        el.style.color = "red";
        el.style.fontSize = "40px";
      },
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  .title {
    height: 60px;
    line-height: 60px;
    background-color: #ccc;
    text-align: center;
    padding: 20px 0;
    margin-bottom: 10px;
  }
  .comp-box {
    display: flex;
    justify-content: space-between;
  }
}
</style>

实际截图

image.png

一.三.私有指令数据绑定--bind第二个参数binding

image.png

  如果不需要data中指定的数据,自己就想传递一个单一的颜色的话,那么就直接在里面加一个单引号,然后把字符串传过去就行了 
 <p v-color="'deeppink'">测试</p>

<script>
 // 1. 组件内的私有指令创建
  directives: {
    // 2. 定义一个名为color的指令,指向一个配置对象
    color: {
      // 3. 当v-color刚绑定到元素标签上,就会触发一个函数bind
      bind(el,binding) {
        console.log(binding);
        // 形参中的el 是绑定了此指令的原生 DOM 对象
        el.style.color = binding.value.color;
        el.style.fontSize = binding.value.fontSize;
      },
    },
  },

</script>

一.四. 自定义指令的Update函数,这个是在每次更新的时候会生效的函数

bind指令第一次被绑定到元素上的时候,会立即触发bind 函数,但是如果你使用按钮去点击想去改变文本的值的话,此时你是改变不了的,那么就要用到update函数来处理了

image.png

实现步骤和思路:

image.png

一.五.简写方式:

: 为什么简写呢? 因为bind和update中的业务逻辑完全相同,则对象格式的自定义指令可以简写成函数格式!

image.png

二.全局自定义指令:

二.一 全局自定义指令的基本用法:

image.png

二.二.只要在全局定义的指令,全局组件,全局样式....最终都要引入main.js中

image.png