什么？ “糖衣炮弹” 语法糖？什么是语法糖语法糖也译为糖衣语法，指的是计算机语言中添加的一种语法，在不影响功能的情况下

什么是语法糖

语法糖也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语。指的是计算机语言中添加的一种语法，在不影响功能的情况下，添加某种简单的语法也能够实现效果，这种语法对计算机没人任何影响，但是对于程序员更方便，通常增加的语法糖能够增加程序员的可读性，减少出错的机会。

使用语法糖可以简化代码，更便于程序员开发

VUE 中的语法糖有哪些？

最常见的语法糖 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 为什么可以实现双向绑定的原因

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">没有语法糖</a>
</div>

<!-- 没有语法糖 -->
<div v-bind:title="title">
  <img v-bind:src="url" alt="" />
  <a v-bind:href="link">没有语法糖</a>
</div>

v-on 的语法糖

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

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

<template>
  <div>
    <button @click="btn">语法糖</button>

    <button v-on:click="btn">无语法糖</button>
  </div>
</template>

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

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

<template>
  <div>
    <button @click="btn('点击事件', $event)">语法糖</button>
  </div>
</template>

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

修饰符

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

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

<template>
  <div>
    // 语法糖
    <a href="http://www.baidu.com" @click.prevent="go">百度</a>

    //普通写法
    <a href="http://www.baidu.com" v-on:click="go">百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    go(e) {
      e.preventDefault();
      console.log("阻止链接跳转");
    }
  }
};
</script>

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

<form @submit.prevent="onSubmit"></form>

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

.stop 用来阻止事件冒泡。
.once 事件只触发一次。
.self 事件只在自身触发，不能从内部触发。
.enter | .tab | .delete | .esc ..... 键盘修饰符
.ctr | .alt | .shift | .meta 系统修饰符

动态 css

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

//点击 你好，实现文字红黑之间切换
<h1
  @click=" changeColor = !changeColor "
  :style="{color:changeColor?'red':'black'}"
>
  你好
</h1>

什么？ “糖衣炮弹” 语法糖？