• vue 自定义指令简单记录


    自定义指令例子

    // 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');
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    这里我们定义了一个名为 color-directive 的全局自定义指令,它在绑定到元素上时,将元素的文本颜色设置为指令的值。

    使用自定义指令
    
    
    • 1
    • 2
    • 3
    • 4
    • 5

    在上述代码中,我们给 v-color-directive 指令传递了一个值 ‘red’,这个值会在指令的 binding 对象中被接收,然后用于改变元素的文本颜色。

    参数和修饰符

    自定义指令也可以接受参数和修饰符。参数可以通过指令表达式传递,修饰符可以用于改变指令行为。例如