时间戳

首页 > 解决方案 > 我在 .vue 文件中的自定义 vue 指令未执行

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

问题描述

我第一次创建了一个 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

谢谢

标签： javascriptvue.jsdirective

解决方案

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

所以将标记更改为<div v-my-test>...</div>. 看到它工作。

推荐阅读