Vue的v-bind和v-on的语法糖分别是什么？

v-bind 和 v-on 是 vue 中常用的指令，其语法糖分别为冒号 : 和 @ 符号。1. v-bind 用于动态绑定属性，语法糖为 :，如 :src=”url”；2. v-on 用于监听事件，语法糖为 @，如 @click=”handleclick”；3. 两者均支持修饰符，如 .sync、.prEvent、.stop 等，进一步提升开发效率与代码可读性。

v-bind 和 v-on 是 vue 中最常用的两个指令，分别用于绑定属性和监听事件。为了简化写法，Vue 提供了它们的语法糖，让代码更简洁、易读。

v-bind 的语法糖是冒号

:

在 Vue 模板中，

v-bind

通常用来动态绑定 html 属性，比如 class、style、src 等。它的语法糖是一个冒号

:

。

原始写法：

立即学习“前端免费学习笔记（深入）”；

<img v-bind:src="imageUrl" />

使用语法糖后：

<img :src="imageUrl" />

这样写起来更轻便，也更容易看清楚哪些属性是动态绑定的。

小技巧：如果你需要绑定多个属性，也可以连续使用多个 :，比如 :src=”url” :alt=”desc”，清晰又直观。

v-on 的语法糖是

@

符号

v-on

用于监听 dom 事件，比如点击、输入、鼠标悬停等。它对应的语法糖是

@

。

原始写法：

立即学习“前端免费学习笔记（深入）”；

<button v-on:click="handleClick">点我</button>

使用语法糖后：

<button @click="handleClick">点我</button>

特别是在组件上监听事件时，这种写法也非常常见，比如：

<my-component @update="refreshData" />

注意：使用

@

的时候，后面跟的是事件名，区分大小写。比如

@myEvent

要和触发的事件名称完全一致。

常见搭配用法：

.sync

和

.stop

等修饰符

除了基本用法，这两个语法糖还支持一些常见的修饰符：

• :

  可以配合

  .sync

  使用（虽然 Vue 3 推荐用

  v-model

  或自定义模型）：

  <my-component :visible.sync="showModal" />

• @

  可以加事件修饰符，比如阻止默认行为或冒泡：

  <form @submit.prevent="handleSubmit"></form> <div @click.stop="doSomething"></div>

这些修饰符可以让你少写很多原生 JS 的

event.preventDefault()

或

event.stopPropagation()

。

基本上就这些。掌握

:

和

@

这两个符号，能让你在 Vue 开发中写出更简洁、可读性更强的模板代码。