Vuejs，'：'和'@'在vuejs中是啥意思？

Posted 2023-02-22

【中文标题】Vuejs，\'：\'和\'@\'在vuejs中是啥意思？

【英文标题】：Vuejs, what does ':' and '@' mean in vuejs?Vuejs，'：'和'@'在vuejs中是什么意思？

【发布时间】：2020-06-23 17:42:51

【问题描述】：

我是 vuejs 新手，我想知道 ':' 和 '@' 在这段代码的上下文中是做什么的？

我不确定这是否是模块的初始值。

感谢您的帮助。

代码如下：

<appWindow
  :app="activeApp"
  :active="windowActive"
  @closed="windowActive = false"
  @removeApp="removeApp"
  @resetNotes="resetNotes"
  @updateCheckbox="updateCheckbox"
/>

【问题讨论】：

它们分别是v-bind: 和v-on: 的简写：vuejs.org/v2/guide/syntax.html#v-bind-Shorthand

感谢您，并链接文档！非常感谢:)

【参考方案1】：

@ 是 v-on 的简写

A : 在道具上会使内容评估为 javascript 而不是字符串。

【参考方案2】：

@ 是 v-on: 的同义词

用于处理事件 更多信息：https://vuejs.org/v2/guide/events.html

<!-- these two are same -->
<button v-on:click="foo()">Button</button>
<button @click="foo()">Button</button>

: 是 v-bind: 的同义词

用于将值绑定到属性 更多：https://vuejs.org/v2/api/#v-bind

<!-- these two are same -->
<img v-bind:src="imgurl">
<img :src="imgurl">