【问题标题】：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
感谢您，并链接文档！非常感谢:)

标签： vue.js

【解决方案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">

【讨论】：

@ 是 v-on: 的同义词

: 是 v-bind: 的同义词

`@` 是 `v-on:` 的同义词

`:` 是 `v-bind:` 的同义词