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

jQuery functions in Vue components in Quasar-Framework

我是网络应用程序开发的新手,我有一些关于 jQuery 和 Vue 的基本问题,但我似乎找不到答案。我有一个在 Quasar-Framework 中制作的应用程序,它经常使用像这样的功能引用:

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

等这些用于 Vue 组件的 "template" 和 "script" 部分。我熟悉 Javascript(或者我以为我是),但对 jQuery 知之甚少。据我了解,这些功能引用内置于 jQuery 中,并且以某种方式引用了一些内部功能。

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

非常感谢

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

关于jQuery和VueJS

首先,我想说的是,将 jQuery 与 VueJS 一起使用通常被 VueJS 开发人员视为一种不好的做法(只要两者不接触相同的东西,尤其是事件和DOM 并且您认为必须将它用于应用程序的特定部分)。

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

另一件事是,基本上任何你可以用 jQuery 做的事情你已经可以用 Vue + plain Javascript 做,所以我只建议在你觉得有必要的时候使用 jQuery,就像它已经在您开发的这个旧网页中一样,或者因为您必须在已经仅支持 Vue 的应用程序中使用某个 jQuery 插件。为此,您必须为要使用 jQuery 插件重现的每个功能创建单独的组件,结合道具、数据、安装和观察,基本上是手动更新插件。

关于$符号

关于这个 $ 符号。你把它和 jQuery 混淆是正常的,因为 '$' 在前面提到的 javascript 框架中,作为 jQuery.

的缩写

例如,您可以:

jQuery("#test").val()

或者干脆这样做...

$("#test").val()

所以这是 jQuery。

$ 登录 VueJS 和 Quasar

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

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

还有其他的,例如 $data、$options、$el、$emit、$watch 等。您可以在这个 article.

由于 Quasar 是一个 VueJS 框架,而且我们知道在 VueJS 中使用 jQuery 通常不被视为一种好的做法,我们可以放心地假设 Quasar 开发人员将此符号用于其他用途而不是 jQuery来电。像命名 prototypes/base objects.

在你给出的例子中

  • $t 常用于 Vue-i18n, an internationalization plugin. You can see about it in Quasar's page here
  • $v 用于 Vuelidate, a plugin for validations in forms. In Quasar's Documentation there is a page dedicated to it here.
  • $q 是 quasar 的基础对象,您可以在其中调用某些插件,例如 Notify:

    this.$q.notify.create('Danger, Will Robinson! Danger!')

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

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