0-7 Vue全解：指令、修饰符（.sync）

指令 Direction

1.什么是指令

• 以 v- 开头的东西就是指令
  1.和默认属性区分开
  2.只有两个缩写不用加 v-
  事件：@
  绑定：:
  ——标签的绑定事件和组件的传输prop都是变量前加冒号，要注意区分开
• 语法
  1.v-指令名:参数=值，如： v-on:click=add
  2.如果值里没有特殊字符，则可以不加引号
  3.有些指令没有参数和值，如 v-pre（不对花括号进行操作）
  4.有些指令没有值，如 v-on:click.prevent（阻止默认事件）
  <a @click.prevent href="https://www.baidu.com">baidu</a>点击之后就不会跳转
  ——当@click.prevent后面有值:@click.prevent="y"，则表示阻止默认事件后执行y

2.修饰符

• 是用来修饰一个指令的
• 官方文档
• 有些指令支持修饰符
  1.@click.stop="add"：阻止事件传播/冒泡
  2.@click.prevent="add"：阻止默认动作
  3.@click.stop.prevent="add"：同时表示两个意思
• 一共有多少修饰符
  1、v-on支持的有：.keycode、.keyAlias、.stop（*重要）、.prevent（*重要）、.capture（捕获时监听）、.self、.once（只触发一次）、.passive、.native
  快捷键相关：.ctrl（用户按下Ctrl时触发）、.alt、.shift、.meta、.exact
  鼠标相关：.left、.right、.middle、
  2、v-bind支持：.prop、.camel、.sync（*重要）
  3、v-model支持（重要）：.lazy、.number、.trim
• .{keycode|keyAlias}
  1.keycode：回车的keycode为13
  2.keyAlias：很多时候keycode很难记，此时就用Alias，它是别名和缩写的意思
  3.回车的别名就是：enter
  ——<input @keypress.enter='y' />：当用户按下回车时，执行y
  

new Vue({
  template:`
  <div>
    //当用户按下回车（keycode=13）时执行y
    <input @keypress.13='y' />
    <!--等价于-->
    <input @keypress.enter='y' />
  </div>
  `,
  methods:{
    y(e){
      console.log("用户输入了 enter")
    }
}).$mount('#app')

• .self
  只在 event.target 是当前自身触发时处理函数
  也就是用户点击的正好是监听的那个元素

3..sync修饰符

• 爸爸给儿子额度，儿子要花钱怎么办？
  答：儿子打电话（触发事件）向爸爸要钱
• 过程
  1.首先爸爸会给儿子一个money,儿子可以看到money有多少钱
  2.儿子想花钱的时候不能直接花钱,会触发一个事件($emit)要花钱(up-date:money)
  3.爸爸监听(v-on)到儿子要花钱的事情,就会把儿子传过来的参数($emit)处理到自己的钱上
• Vue的三个规则
  1.组件不能修改props数据，也就是不能修改外部数据，只能修改data和computed
  2.$emit可以触发事件，并传参
  ——$emit('事件名',参数值)
  ——v-on:事件名="$event"：监听这个事件，获取到参数
  3.$event可以获取$emit传递的参数
• 场景
  1.我把一个数据给你
  2.但是你要改必须通知我改（你自己改就乱套了）
  3.但是写得太长了：告诉你数据；监听事件；获取参数
  <Child :money="total" v-on:update:money="total = $event" />
  4.封装一个修饰符：.sync（同步）
  <Child :money.sync="total" />

//父组件
<template>
  <div class="app">
    我是父亲，我有 {{total}} 元
	<Child :money="total" v-on:update:money="total = $event">
	//等价于
	<Child :money.sync="total" />
  </div>
</template>

<script>
export default{
  data(){
    return {total:10000}
  }    
}
</script>

//子组件
<template>
  <div class="child">
    我父亲给我 {{money}}
	<button @click="$emit('update:money',money-100)">
	  <span>花钱</span>
	</button>
  </div>
</template>

<script>
export default{
  props:["money"]  
}
</script>

4.总结

• @click.stop="xxx"
• @click.prevent="xxx"
• @keypress.enter='xxx'
• :money.sync="total"