指令与sync修饰符

一、指令
1、什么是指令
通俗来说，在Vue中以 v- 开头的东西就是指令（绑定和事件的缩写 ： 和 @ 是没 v- 的）
2、语法
v-指令名:参数=值 ， 如 ： v-on:click=add
如果值里没有特殊字符，则可以不加引号
有些指令没有参数和值，如：v -pre
有些指令没有值，如： v-on:click.prenvent

二、修饰符

比如上文的：v-on:click.prenvent 中的 .prenvent 就是修饰符。它们的功能各种各样

1、有哪些指令支持修饰符

@click.stop="add" 表示阻止事件传播/冒泡
@click.prevent="add" 表示阻止默认动作
@click.stop.prevent="add" 同时表示这两种意思

2、.sync修饰符

首先要明白：
在 Vue 中 ，子父组件最常用的通信方式就是通过 props 进行数据传递， props 值只能在父组件中更新并传递给子组件，在子组件内部，是不能改变传递进来的 props 值，这样保证了数据单行流通

例子

Vue规则：
1、组件不能修改 props 外部数据
2、$emit  可以触发事件，并传参
3、$event  可以获取 $emit 的参数

:money.sync="total"   //语法糖，代码会被扩展为下面这串

等价于

:money="total" v-on:update:money="total = $event"

所以 .sync 就是一个语法糖

3、一共有多少修饰符

v-on支持的有： .{keycode| keyAlias} 、 . stop、.prevent 、 .capture 、 .self 、.once、 .passive、 .native

快捷键相关：.ctrl、.alt、.shift、 .meta、.exact
鼠标相关：.left、.right、.middle
v-bind 支持的有：.prop、.camel、.sync
v-model 支持的有：.lazy、.number、.trim