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

Question

我是Web应用程序开发的新手，我对jQuery和Vue有一些基本的查询，我似乎找不到这些答案。 我有一个使用Quasar框架制作的应用程序，该应用程序经常使用如下功能引用：

- {{ $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，例如您正在开发的旧网页中或因为必须使用特定的jQuery在仅Vue的应用程序中的jQuery插件。 为此，您必须为要使用jQuery插件重现的每个功能创建单独的组件，并结合道具，数据，安装和监视功能，基本上是手动更新插件。

关于$符号

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

例如，您可以：

jQuery("#test").val()

或者只是做这个...

$("#test").val()

这是针对jQuery的。

VueJS和Quasar中的$符号

该$符号用于默认情况下vue实例和组件具有的属性或方法的名称。

如果您使用vue已有一段时间，您会注意到，如果要获取DOM特定部分或组件的引用，则可以为其设置ref，然后使用的$ refs属性对其进行调用。您的Vue实例。 $ refs属性是Vue实例的基础属性。

也有其他类似$数据，$选项，$ EL，$ EMIT，$手表等，您可以找到更多与此相关的特性，以及如何使用VueJS对于这样的事情在$数据代理的文章 。

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

在这个例子中

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

• $ q是类星体的基础对象，您可以在其中调用某些插件，例如Notify：

  $ q.notify.create（'Danger，Will Robinson！Danger！'）

您还可以设置sessionStorage的，localStorage的，并呼吁其作为所述注入其他原型这里 。

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