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

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

}

6、注册组件语法糖

所谓的注册组件语法糖是指省去组件构造器的定义，直接将组件构造器对象传入注册组件函数里，这样会减少 CPU 的调度以及内存的分配。

全局组件使用：

//全局组件语法糖写法

Vue.component(

‘my-component’ ,

template:`

组件内容

`)

/* 全局组件注册 */

//组件使用

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！