我在 .vue 文件中的自定义 vue 指令未执行

Question

我第一次创建了 Vue 自定义指令。但该指令未初始化。我也尝试了一个新项目和代码笔。我真的不知道问题所在！

这是我的 Vue 组件：

<template>
  <div id="app">
    <div my-test>Some text...</div>
  </div>
</template>

<script>
export default {
  name: "App",
  directives: {
    "my-test": function(el) {
      el.style.backgroundColor = "red";
      console.log("This is my first directive!");
    }
  }
};
</script>

沙盒： https://codesandbox.io/s/angry-khorana-uuhd0?file=/src/App.vue

谢谢

Answer 1

为确保符合命名标准（名称中有一个 - 破折号）并避免冲突，默认情况下，Vue 注册的所有指令都会自动以 v- 为前缀。

因此将标记更改为 <div v-my-test>...</div>。看到了working.

我在 .vue 文件中的自定义 vue 指令未执行

My custom vue directive in a .vue file is not executing

javascript

directive

vue.js