0

我是 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 中的，并且以某种方式引用了一些内部功能。

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

非常感谢

4

1 回答 1

7

我不是专家，但我使用 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 的特定部分或组件的引用，您需要为其设置一个 ref，然后使用 $refs 的属性调用它你的 Vue 实例。这个 $refs 属性是 Vue 实例的基础属性。

还有其他的，如 $data、$options、$el、$emit、$watch 等。您可以在本文中找到更多与此属性相关的内容以及 VueJS 如何使用代理来处理 $data 等内容。

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

在你给出的例子中

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

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

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

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

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

于 2018-12-04T20:45:41.203 回答