指令和修饰符

指令是以 v-为前缀的特殊属性

• v-bind简写:
• v-on简写@
• v-pre
• v-text
• v-html
• v-if
• v-for
• v-show
• v-model
• v-slot
• v-cloak
• v-once

语法

• v-指令名:参数.修饰符=值，例如：v-on:click=add
• 值里如果没有特殊字符，可以不加""，和命令行的规则一样
• 有些指令没有参数和值，如v-pre
• 有些指令没有值，如v-on:click.prevent="x"，阻止默认动作执行x

修饰符

修饰符用于指出一个指令应该以特殊方式绑定

支持修饰符的指令

v-on

• .{keyCode|keyAlias}
.enter .tab .delete(捕获“删除”和“退格”键) .esc .space .up .down .left .right
• .stop阻止默认事件传播/冒泡
• .prevent阻止默认动作 .stop.prevent两者都阻止
• .capture添加事件侦听器时使用 capture 模式
• .self 只当事件是从侦听器绑定的元素本身触发时才触发回调
• .once 只触发一次回调
• .passive 以{ passive: true }模式添加侦听器
• .native 监听组件根元素的原生事件
  鼠标相关的
• .left 只当点击鼠标左键时触发
• .right 只当点击鼠标右键时触发
• .middle 只当点击鼠标中键时触发
  快捷键相关的
• .ctrl
• .alt
• .shift
• .meta

v-bind

• .prop
• .camel
• .sync

v-model

• .lazy
• .number
• .trim

.sync修饰符

Vue规则：组件不能修改props外部数据

Vue规则：$emit可以触发事件，把更新的数据作为参数传递出去

Vue规则：$event可以获取$emit传递的参数

//Child.vue
<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
      <span>花钱</span>
    </button>
  </div>
</template>

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


<style>
.child {
  border: 3px solid green;
}
</style>

//App.vue
<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money="total" v-on:update:money="total = $event"/>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

上述例子可以理解为 EventBus-订阅/发布 过程，当一个prop被父组件和子组件双向绑定时，如果要修改prop，需要通知Vue，否则多个子组件都去更改的话，无法确定变更来源

在Child上触发事件<button @click="$emit('update:money', money-100)">是发布过程
在Child上监听数据的的<Child :money="total" v-on:update:money="total = $event"/>是订阅过程

:money="total" v-on:update:money="total = $event"可以缩写为:money.sync="total"

注意：使用此种模式，必须写成update:myPropName

总结

清楚4个修饰符

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