关于vue的冒号,@的含义

一、含义

:class 等效 于 v-bind:class

@click 等效于 v-on:click

---

二、说明

v-bind

:是v-bind的缩写，是为了动态绑定数据。

一般的常量属性我们不用添加冒号；如果是会产生变化的值则要加上冒号。

加上了冒号是为了动态绑定数据，等号后面可以写***变量。

加冒号的，说明后面的是一个变量或者表达式，没加冒号的后面就是对应的字符串字面量

如果不使用冒号，等号后面就可以写字符串等原始类型数据。这时就无法进行动态绑定数据了。

<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>

<!-- 缩写 -->
<a :href="url"> ... </a>

<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>

v-on

v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为 v-on:click=“methodName” 或使用快捷方式 @click=“methodName”.

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 -->
<a @[event]="doSomething"> ... </a>

Vue官方说明 v-on

---

vue官方文档参考链接