指令 Direction

1.什么是指令

• 以 v- 开头的东西就是指令
  1.和默认属性区分开
  2.只有两个缩写不用加 v-
  事件：@
  绑定：:
• 语法
  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>点击之后就不会跳转

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
  

new Vue({
  template:`
  <div>
    <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外部数据
  2.$emit可以触发事件，并传参
  （emit触发给谁：谁监听了child就触发给谁）
  3.$event可以获取$emit的参数
• 场景
  1.我把一个数据给你
  2.但是你要改必须通知我改（你自己改就乱套了）
  3.但是写得太长了：告诉你数据；监听事件；获取参数
  <Child :money="total" v-on:update:money="total = $event" />
  4.封装一个修饰符：.sync（同步）
  <Child :money.sync="total" />

4.总结

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