VUE|传说中 VUE 的“语法糖”到底是啥（） vue语法糖|vue.js

一、什么是语法糖？ 【VUE|传说中 VUE 的“语法糖”到底是啥（）】语法糖也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语。指的是计算机语言中添加的一种语法，在不影响功能的情况下，添加某种简单的语法也能实现效果，这种语法对计算机没有任何影响，但是对于程序员更方便，通常增加的语法糖能够增加程序员的可读性，减少出错的机会。
使用语法糖可以简化代码，更便于程序员开发。
二、VUE中语法糖有哪些？ 1、最常见的语法糖 v-model
使用 v-model 可以实现数据双向绑定，但是如何实现的呢？
v-model 绑定数据之后，既绑定了数据，又添加了事件监听，这个事件就是 input 事件。
使用案例：

//语法糖写法 //还原为以下实例

输入的时候会触发 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：如果方法不传参时，可以不加小括号。

//需要注意的是，如果方法本身有一个参数，会默认将原生的事件event参数传递进来 methods:{ btn( event ){ console.log( 'event' , event ) } }

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

//需要注意的是，$event 事件拿到浏览器事件对象 methods:{ btn( type, event ){ console.log( 'type' , type ) //点击事件 console.log( 'event' , event ) } }

4、修饰符
修饰符是以半角句号 . 指明的特殊后缀。v-on 后面的修饰符，也是语法糖。
示例：链接添加点击事件，点击之后不希望跳转。

//语法糖百度//普通写法百度 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:` 组件内容 `)/* 全局组件注册 */ //组件使用 //注册组件 const myComponent = Vue.extend({ template:`VUkeh` }) Vue.component('myComponent', myComponent)

局部组件使用：

//全局组件语法糖写法 components:{ 'my-component':{ template:`组件内容` } }/* 局部组件注册 */ //注册组件 const myComponent = Vue.extend({ template:`VUkeh`, components:{ child:{ template:`子组件内容` } } }) Vue.component('myComponent', myComponent)