Vue 指令及修饰符 & .sync 详解

1、指令及其语法

Vue 模板语法中的 v-text、v-html、v-pre 都是指令，它起到一种命令或指示的效果，语法 如下：

v-指令名：参数 = 值    如： v-on:click="add"，如果值里没有特殊字符，则可以不加引号。

补充：有些指令没有参数和值，如 v-pre ，有些指令没有值，如 v-on:click.prevent 。

2、指令的修饰符

指令的语法是：v-指令名：参数 = 值 。有时候你会看到指令后面会加 .修饰符 字样，有的指令支持修饰符，它们的功能各种各样，但其主要是起到修饰指令的功能。

1.<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就是一个语法糖 -->