目录
1、指令及其语法
Vue 模板语法中的 v-text、v-html、v-pre 都是指令，它起到一种命令或指示的效果，语法 如下：
v-指令名：参数 = 值 如： v-on:click="add"，如果值里没有特殊字符，则可以不加引号。
补充：有些指令没有参数和值，如 v-pre ，有些指令没有值，如 v-on:click.prevent 。
2、指令的修饰符
指令的语法是：v-指令名：参数 = 值 。有时候你会看到指令后面会加 .修饰符 字样，有的指令支持修饰符，它们的功能各种各样，但其主要是起到修饰指令的功能。
<div @click.stop="add"> 添加 </div> <!-- 表示阻止事件传播/冒泡 -->
<a @click.prevent="add"> 添加 </a> <!-- 表示阻止默认动作 -->
<div @click.stop.prevent="add"> 添加 </div> <!-- 同时表示两种意思 -->3、都有哪些指令修饰符
- v-on 支持的有：.{keycode|keyAlias} .stop .prevent .capture .self .once .passive .native
<input @keypress.13="fun"/> <!-- func函数可接收event参数--> <input @keypress.enter="fun"/> - 快捷键相关：.ctrl .alt .shift .meta .exact
- 鼠标相关：.left .right .middle
- v-bind 支持的有：.prop .camel .sync
- v-model 支持的有：.lazy .number .trim
以上修饰符的完整讲解，可参考 Vue 官方文档，上述黑色字体的修饰符的可以仅作为了解。
4、深入理解 .sync 指令修饰符
在说 vue 的 .sync 指令修饰符前，我们先看下官方文档：vue.sync 修饰符，里面说 vue.sync 修饰符以前存在于 vue1.0 版本里，后在 2.0 中被移除了。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起 Vue 重新引入了 sync 修饰符，但是这次它只是作为一个编译时的 语法糖 存在。它会被扩展为一个自动更新父组件属性的v-on 监听器，以更方便父子组件间的双向绑定。
.sync 指令修饰符主要在父子组件传值是时候使用，子组件通过 props 属性接收父组件传递过来的值，但是子组件并不能直接对 props 属性做修改，而是需要触发一个事件，让父组件进行修改。之所以需要这样，理论上的原因是，该 props 属性即存在父组件又存在子组件中，如果子组件擅自修改 props 中的属性，父组件并不能监听到该数据的修改，从而会出现一些问题。示例代码如下：
<div id="app">
<div>{{bar}}</div>
<my-comp :foo.sync="bar"></my-comp>
<!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> -->
</div>
<script>
Vue.component('my-comp', {
template: '<div @click="increment">点我+1</div>',
data: function() {
return {copyFoo: this.foo}
},
props: ['foo'],
methods: {
increment: function() {
this.$emit('update:foo', ++this.copyFoo); //通过$emit向父组件传值
}
}
});
new Vue({
el: '#app',
data: {bar: 0}
});
</script>
<my-comp :foo.sync="bar"></my-comp> <!-- 会被扩展成：-->
<comp :foo="bar" @update:foo="val => bar = val"></comp> <!-- .sync就是一个语法糖 -->