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 等。它的语法糖是一个冒号
:。
原始写法：
立即学习“前端免费学习笔记（深入）”；
@@##@@
使用语法糖后：
@@##@@
这样写起来更轻便，也更容易看清楚哪些属性是动态绑定的。
小技巧：如果你需要绑定多个属性，也可以连续使用多个 :，比如 :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 开发中写出更简洁、可读性更强的模板代码。
