如何在Vue 3中使用Typescript创建全局自定义指令

我使用最新的Vue cli创建了该应用程序,但我尝试注册一个全局自定义指令,但未成功。有人可以告诉我我在做什么错吗?

import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";

const app = createApp(App);

app.directive("highlight", {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value;
  },
});

app
  .use(store)
  .use(router)
  .mount("#app");

屏幕截图以显示问题

布萨吉拉·卜拉欣(Boussadjra Brahim)

该指令v-highlight应具有string类型的值,例如:

     <h3 v-highlight="'yellow'">highlighted using yellow</h3>
    <h3 v-highlight="'#4455ff'">highlighted using blue</h3>

如果您没有提供它''就会出现以下错误:

[Vue警告]:渲染期间访问了属性“黄色”,但未在实例上定义

这意味着您的指令正在寻找yellow脚本中未定义的数据或计算属性

现场演示

我提出了这个问题,他们将修复该语法错误

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Angularjs中创建自定义指令以使用ID更改其在应用程序中使用的状态?

如何在 angular 5 中使用启用的“as 语法”创建自定义指令?

Vue 3中的自定义指令

如何在Vue.js 3中制定自定义指令?

如何在angular中创建自定义指令

如何在Java Web App中创建自定义标签?如何在JSP中使用自定义标签?

如何在Wordpress中全局使用自定义字段?

如何在python3中使用错误消息和状态代码创建自定义异常

Vuejs3 如何在单独的文件夹中注册自定义全局指令?

如何在TypeScript中使用自定义钩子(Fetch)

如何在Typescript中创建自定义事件?

如何在vue.js自定义指令中传递动态参数

如何在自定义Django模板标签中动态呈现Vue.js指令

如何在处理3.4中使用Java创建自定义延迟功能?

如何在TF2.0中使用自定义渐变创建keras图层?

如何在代码中创建自定义UIButton并在xib中使用它?

如何在Liferay 5.2.3中使用钩子创建自定义登录操作

如何在Angular 6中使用ngModel创建自定义输入组件?

如何在Swift 3.0中使用自定义UI创建标签栏

如何在 Shopware 6 中创建可在我的 Twig 文件中使用的自定义 Javascript?

如何在MVC中使用自定义路由创建自定义URL

如何在wxPython中使用自定义热点创建自定义光标?

如何在Kotlin中使用自定义字体创建TextView的自定义类?

如何在angular 6中使用自定义指令渲染动态生成的嵌入式SVG

如何在AngularJS中的自定义指令*中使用自己的作用域*访问父作用域?

如何在Angular2中使用不带ngModel的双向绑定编写自定义指令

在Ionic 2中,如何创建使用Ionic组件的自定义指令?

如何在Swift 3中创建自定义通知?

如何在Vue中使用全局函数?