Gravação simples de instruções personalizadas vue

Exemplo de comando personalizado

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 全局自定义指令
app.directive('color-directive', {
  mounted(el, binding) {
    // 当指令绑定到元素上时触发
    // el 是绑定的元素
    // binding 包含了指令的信息
    el.style.color = binding.value;
  },
});

app.mount('#app');

Aqui definimos uma diretiva personalizada global chamada color-directive, que quando vinculada a um elemento, define a cor do texto do elemento para o valor da diretiva.

Use diretivas personalizadas

<template>
  <div>
    <p v-color-directive="'red'">这个段落的文本颜色是红色。</p>
  </div>
</template>

No código acima, passamos um valor 'red' para a diretiva v-color-directive.Este valor será recebido no objeto de ligação da diretiva e então usado para alterar a cor do texto do elemento.

Parâmetros e modificadores

As diretivas personalizadas também podem aceitar parâmetros e modificadores. Os parâmetros podem ser passados ​​através de expressões diretivas e os modificadores podem ser usados ​​para alterar o comportamento da diretiva. Por exemplo

<template>
  <div>
    <p v-color-directive:arg.modifier="'