Vuejs,':'和'@'在vuejs中是啥意思?

Posted

技术标签:

【中文标题】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">

【讨论】:

以上是关于Vuejs,':'和'@'在vuejs中是啥意思?的主要内容,如果未能解决你的问题,请参考以下文章

vue add i18n 在使用 vuejs3 和 @vue/cli 4.5.4 时遇到错误,该错误是啥意思以及如何调试?

让 laravel、vuejs 和 Flutter 协同工作的最佳方式是啥?

数据绑定整个页面的正确方法或vuejs方法是啥?

VueJs - 使用输入字段创建子组件的正确方法是啥

1vueJs入门知识

如何在 Vuejs 中从其父组件设置嵌套组件的样式?