目录
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就是一个语法糖 -->
