vue语法糖是什么意思,vue3语法糖
从和Vue的接触中，我们知道v-model实现了数据的双向绑定。那么他能实现绑定的原理是什么呢？V-model，最常见的语法糖，今天通过一个案例详细介绍给大家。请有需要的朋友参考一下。
目录
一、什么是语法糖？二。VUE语法中的糖是什么？1.最常见的语法糖v-model2，v-bind的语法糖3，v-on的语法糖4，修改器5，动态css6和注册组件语法糖。
一、什么是语法糖？
Grammar也译为糖衣语法，是英国计算机科学家彼得j兰丁发明的一个术语。它指的是添加到计算机语言中的一种语法。在不影响功能的情况下，加入简单的语法也能达到效果。这种语法对计算机没有影响，但对程序员来说更方便。通常，添加的语法糖可以增加程序员的可读性，减少出错的机会。
使用语法糖可以简化代码，让程序员更容易开发。
二、VUE中语法糖有哪些？
1、最常见的语法糖 v-model
使用v-model可以实现双向数据绑定，但是如何实现呢？
v-model绑定数据后，不仅绑定了数据，还增加了事件监控。这个事件就是输入事件。
使用案例：
//语法糖写
输入类型=text v-model=name
//还原到以下实例
输入类型=文本
v-bind:value=name
v-on:input= name=$ event . target . value
输入会触发输入事件，输入事件会将当前值赋给value，这也是v-model能够实现双向绑定的原因。
2、v-bind 的语法糖
V-bind用于添加动态属性。src、href、class、style、title等常用属性都可以通过v-bind添加动态属性值。
v-bind的语法糖是去掉v-bind，用冒号(:)代替
//语法糖写
div :title=title
img :src=url alt=
a:href= link rel= external nofollow rel= external nofollow 无语法糖/a
/div
//没有语法糖
div v-bind:title=title
img v-bind:src=url alt=
a-bind:href= link rel= external No follow rel= external No follow 无语法糖/a
/div
3、v-on 的语法糖
V-on绑定事件监听器，v-on的语法糖，缩写为@
1:如果方法不传递参数，可以不加括号。
Button @click=btn 语法糖/button
按钮v-on:click=btn 无语法糖/按钮
//需要注意的是，如果方法本身有参数，默认会传入原生事件参数。
方法：{
btn(事件){
console.log( event ，事件)
}
}
2:如果需要传递参数，还需要事件参数。
Button @click=btn (click event ，$event)语法sugar /button
//需要注意的是，$event事件获取的是浏览器事件对象。
方法：{
btn(类型，事件){
Console.log( type ，type) //单击事件
console.log( event ，事件)
}
}
4、修饰符
修饰符是由半角句点表示的特殊后缀。v-on后面的修饰语也是语法糖。
例子：一个链接添加了一个点击事件，点击后你不想跳转。
//语法糖
a href= 3358 www . Baidu . com rel= external no follow rel= external no follow @ click . prevent= go Baidu/a
//常见书写
a href= 3358 www . Baidu . com rel= external nofollow rel= external nofollow v-on:click= go Baidu/a
方法：{
走(e){
e . prevent default()；
Console.log(防止链接跳转)
}
}
防止修饰符是为了防止默认事件。和提交也适用。
form @ submit . prevent= on submit /form
以下是常见的修饰语，同上。预防。stop用于防止事件冒泡。
的。once事件仅触发一次。
的。自身事件只能由自身触发，不能内部触发。输入。tab 。删除。转义字符.键盘修饰键。ctr 。alt 。shift 。元系统修改器
5、动态css
使用v-bind，您可以通过style或class添加动态样式。
//点击Hello在红色和黑色文本之间切换。
h1 @click= changeColor=！ change color :style= { color:change color？红色:黑色 }
你好
/h1
数据：{
改变颜色：假
}
6、注册组件语法糖
所谓注册组件语法糖，是指省略组件构造函数的定义，直接将组件构造函数对象转移到注册组件函数中，这样会减少CPU调度和内存分配。
全球组件使用：
//全局组件语法糖写
组件(
“我的组件”，
模板：` 1
组件内容/分区
`)
/*全局组件注册*/
//组件用法
我的组件/我的组件
//注册组件
const myComponent=Vue.extend({
模板：` 1
差异
h2VUkeh/h2
/div
`
})
Vue.component(我的组件，我的组件)
使用本地组件：
//全局组件语法糖写
组件：{
我的组件:
模板：/div组件内容/div
}
}
/*本地组件注册*/
//注册组件
const myComponent=Vue.extend({
模板：` 1
差异
h2VUkeh/h2
/div
`,
组件：{
孩子：{
模板：/div子组件内容/div ` 1
}
}
})
Vue.component(我的组件，我的组件)
关于vue传说中的“语法糖”是什么的这篇文章到此为止。更多相关VUE语法糖含量，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。