传说中 VUE 的“语法糖”到底是啥？

//还原为以下实例

<input type=“text”

v-bind:value=“name”

v-on:input=“name=$event.target.value”>

输入的时候会触发 input 事件，input 事件会把当前值赋值给 value ，这就是 v-model 为什么可以实现双向绑定的原因。

2、v-bind 的语法糖

v-bind 用来添加动态属性的，常见的 src、href、class、style、title 等属性都可以通过 v-bind 添加动态属性值。

v-bind 的语法糖就是去掉 v-bind 替换成冒号 (😃

// 语法糖写法

没有语法糖

// 没有语法糖

没有语法糖

3、v-on 的语法糖

v-on 绑定事件监听器的，v-on 的语法糖，就是简写成@ 。

情况1：如果方法不传参时，可以不加小括号。

<button @click=“btn”>语法糖

无语法糖

//需要注意的是，如果方法本身有一个参数，会默认将原生的事件event参数传递进来

methods:{

btn( event ){

console.log( ‘event’ , event )

}

}

情况2：如果需要传递参数时，又同时需要 event 参数。

<button @click=“btn( ‘点击事件’ , $event )”>语法糖

//需要注意的是，$event 事件拿到浏览器事件对象

methods:{

btn( type, event ){

console.log( ‘type’ , type ) //点击事件

console.log( ‘event’ , event )

}

}

4、修饰符

修饰符是以半角句号 . 指明的特殊后缀。v-on 后面的修饰符，也是语法糖。

示例：链接添加点击事件，点击之后不希望跳转。

//语法糖

<a href=“http://www.baidu.com” @click.prevent=“go”>百度

//普通写法

百度

methods:{

go(e){

e.preventDefault();

console.log(‘阻止链接跳转’)

}

}

prevent 修饰符是阻止默认事件。还有 submit 同样也适用。

下列是常见的修饰符，与上边 .prevent 使用相同。

• .stop 用来阻止事件冒泡。

• .once 事件只触发一次。

• .self 事件只在自身触发，不能从内部触发。

• .enter | .tab | .delete | .esc … 键盘修饰符

• .ctr | .alt | .shift | .meta 系统修饰符

5、动态css

使用 v-bind 可以通过 style 或 class， 可以添加动态样式。

//点击 你好，实现文字红黑之间切换

你好

data:{

changeColor:false

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

[外链图片转存中…(img-wFzDOZXX-1714548429471)]