时间戳

首页 > 解决方案 > Vue.js 通过外部库对 DOM 进行动态更改（jQuery 样式）

jquery - Vue.js 通过外部库对 DOM 进行动态更改（jQuery 样式）

问题描述

假设我使用 Vue.JS 完成了我的项目。我有很多使用 Vue.JS 组件的 HTML 等等……我的表单、输入、按钮……很多东西都有它们的title属性……现在我想让这些标题看起来更花哨。在 jQuery 中，很容易制作一个小的库（并且有很多）来做到这一点，而无需触及现有的 html。“ vue方式”将如何完成？

[编辑-更多示例]

  1. 想象一下，我希望添加 github.com/Akryum/v-tooltip 指令，但不希望重构我的所有代码并将 v-tooltip 属性包含到我的所有 html 中（称之为惰性）。所以我想做一些事情，比如$('a[title]').each(function(){ $(this).attr('v-title', $(this).attr('title')); });自动将 v-title 指令应用于我的所有带有 title 属性的链接......我知道我可以在使用 jQuery 或 vanilla js 初始化 Vue.js 之前这样做，但这有点愚蠢。
  2. 想象一下，我使用 Vuetify 并且出于调试目的，我希望我的所有 v-btn 组件在单击时将某些内容放入 console.log。在 jQuery 中，它就像$('.mybutton').click(function(){ console.log($(this).data() ); });
  3. 我希望在每个输入的标题/工具提示中显示当前值。但同样 - 不需要重构我的所有代码，因为也许我只需要它作为用户体验的临时衡量或 A/B 测试，它将在下一天/一周被删除......因为一些伪代码看起来像$('input').prop(':title', 'The value is {{model.value}}');

标签： jqueryvue.js

解决方案

在vuejs您有一个名为的功能Directive，它是针对这种情况的一个很好的工具。只需创建一个全局指令（因为您似乎将在多个地方使用它）并在其中添加您感兴趣的所有必要样式和行为。

推荐阅读