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

Question

我第一次创建了Vue自定义指令。但是该指令未初始化。我尝试了一个新项目，也尝试了Codepen。我真的不知道这个问题！

这是我的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。