Quasar-Framework 中 Vue 组件中的 jQuery 函数

Question

我是 Web 应用程序开发的新手，我对 jQuery 和 Vue 有一些基本的疑问，但我似乎找不到答案。我有一个在 Quasar-Framework 中制作的应用程序，它经常使用以下功能引用：

- {{ $t("refer to some variable in another Vue component") }}
- $v.form.username.$touch
- $customVueComponent
- this.$q

等等。这些用于 Vue 组件的“模板”和“脚本”部分。我熟悉 Javascript（或者我以为我是）但对 jQuery 了解不多。据我了解，这些功能引用是内置在 jQuery 中的，并且以某种方式引用了一些内部功能。

如果有人能解释这些“$”引用的确切含义、它们如何工作、如何使用它们以及是否有这些函数的完整列表可供参考，那就太好了。

非常感谢

Answer 1

我不是专家，但我使用 vuejs、jquery 和 quasar 已经有一段时间了，所以我想我可以帮助你解决一些疑问。

关于 jQuery 和 VueJS

首先我想说的是，将 jQuery 与 VueJS 一起使用对于 VueJS 开发人员来说通常被视为一种不好的做法（只要两者不涉及相同的事情，尤其是事件和 DOM，并且您认为），您就可以使用它您必须在应用程序的特定部分使用它）。

原因是 Vue 的工作方式与 jQuery 对 DOM 和事件的操作产生了冲突。 VueJS 生命周期的工作方式是，附加了 Vue 的 DOM 会经常更新以匹配实例定义的内容（反应性。这意味着 jQuery 可能会丢失绑定在此上下文中的事件的跟踪，从而导致两者之间的协同作用不佳。

另一件事是，基本上你可以用 jQuery 做的任何事情，你已经可以用 Vue + 纯 Javascript 来做，所以我只建议在你觉得有必要的情况下使用 jQuery，就像它已经在你开发的这个旧网页中一样，或者因为你必须在已经只有 Vue 的应用程序中使用某个 jQuery 插件。为此，您必须为要使用 jQuery 插件重现的每个功能创建单独的组件，并结合 props、data、mounted 和 watch，基本上是手动更新插件。

关于 $ 符号

关于这个 $ 符号。将它与 jQuery 混淆是正常的，因为 '$' 在前面提到的 javascript 框架中是 jQuery 的缩写。

例如，您可以：

jQuery("#test").val()

或者干脆这样做......

$("#test").val()

那就是 jQuery。

$ 登录 VueJS 和 Quasar

这个 $ 符号用于 vue 实例和组件默认具有的属性或方法的名称前面。

如果您已经使用 vue 一段时间了，您会注意到，如果您想获取 DOM 的特定部分或组件的引用，您需要为其设置一个引用，然后使用 $ 调用它Vue 实例的 refs 属性。这个 $refs 属性是 Vue 实例的基础属性。

还有其他的，如 $data、$options、$el、$emit、$watch 等。您可以在 article 中找到与此属性以及 VueJS 如何为 $data 之类的东西使用代理的更多相关信息。

由于 Quasar 是一个 VueJS 框架，并且我们知道在 VueJS 中使用 jQuery 通常不是一种好的做法，我们可以放心地假设 Quasar 开发人员将此符号用于其他用途，而不是用于 jQuery 调用。类似于命名原型/基础对象。

在你给出的例子中

• $t 通常用于Vue-i18n，一个国际化插件。您可以在 Quasar 的页面here 中看到它
• $v 用于Vuelidate，一个用于表单验证的插件。在 Quasar 的文档中有一个专门的页面here。

• $q 是 quasar 的基础对象，您可以从中调用某些插件，例如 Notify：

  this.$q.notify.create('危险，威尔罗宾逊！危险！')

您还可以设置 sessionStorage、localStorage 并调用其他注入的原型，如 here 所述。

tl;dr: $ 在 jQuery 中用于缩写 jQuery 调用。 jQuery 和 Vuejs 一起通常被认为是一种不好的做法，但可以做到。 Quasar 是一个 VueJS 框架，因此它是使用 Vuejs + 纯 Javascript 开发的。名称开头带有“$”的属性是来自 VueJS 和 Quasar 的原型属性、方法和对象，它们在每个 Vue 实例和 Quasar 页面中重复出现，其目的是轻松访问组件的数据、调用插件或向父组件发出和事件。