Vue中的语法糖

Vue中的语法糖

1、什么是语法糖？

学习语法糖之前我们要了解什么是语法糖：
语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。

2、VUE中语法糖有哪些?

2.1、最常见的语法糖 v-model

使用 v-model 可以实现数据双向绑定，但是如何实现的呢？
v-model 绑定数据之后，既绑定了数据，又添加了事件监听，这个事件就是 input 事件。
使用案例：

<!-- 语法糖写法 -->
<input type="text" v-model="name" >
<!-- 还原为以下实例 -->
<input type="text" 
 v-bind:value="name" 
 v-on:input="name=$event.target.value">

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

2.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=