指令是以 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-指令名:參數(shù).修飾符=值莹捡，例如：v-on:click=add
• 值里如果沒有特殊字符毕箍，可以不加""，和命令行的規(guī)則一樣
• 有些指令沒有參數(shù)和值道盏，如v-pre
• 有些指令沒有值，如v-on:click.prevent="x"文捶，阻止默認(rèn)動(dòng)作執(zhí)行x

修飾符

修飾符用于指出一個(gè)指令應(yīng)該以特殊方式綁定

支持修飾符的指令

v-on

• .{keyCode|keyAlias}
.enter .tab .delete(捕獲“刪除”和“退格”鍵) .esc .space .up .down .left .right
• .stop阻止默認(rèn)事件傳播/冒泡
• .prevent阻止默認(rèn)動(dòng)作 .stop.prevent兩者都阻止
• .capture添加事件偵聽器時(shí)使用 capture 模式
• .self 只當(dāng)事件是從偵聽器綁定的元素本身觸發(fā)時(shí)才觸發(fā)回調(diào)
• .once 只觸發(fā)一次回調(diào)
• .passive 以{ passive: true }模式添加偵聽器
• .native 監(jiān)聽組件根元素的原生事件
  鼠標(biāo)相關(guān)的
• .left 只當(dāng)點(diǎn)擊鼠標(biāo)左鍵時(shí)觸發(fā)
• .right 只當(dāng)點(diǎn)擊鼠標(biāo)右鍵時(shí)觸發(fā)
• .middle 只當(dāng)點(diǎn)擊鼠標(biāo)中鍵時(shí)觸發(fā)
  快捷鍵相關(guān)的
• .ctrl
• .alt
• .shift
• .meta

v-bind

• .prop
• .camel
• .sync

v-model

• .lazy
• .number
• .trim

.sync修飾符

Vue規(guī)則：組件不能修改props外部數(shù)據(jù)

Vue規(guī)則：$emit可以觸發(fā)事件荷逞，把更新的數(shù)據(jù)作為參數(shù)傳遞出去

Vue規(guī)則：$event可以獲取$emit傳遞的參數(shù)

//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 我現(xiàn)在有 {{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-訂閱/發(fā)布 過程，當(dāng)一個(gè)prop被父組件和子組件雙向綁定時(shí)粹排，如果要修改prop种远，需要通知Vue，否則多個(gè)子組件都去更改的話顽耳，無法確定變更來源

在Child上觸發(fā)事件<button @click="$emit('update:money', money-100)">是發(fā)布過程
在Child上監(jiān)聽數(shù)據(jù)的的<Child :money="total" v-on:update:money="total = $event"/>是訂閱過程

:money="total" v-on:update:money="total = $event"可以縮寫為:money.sync="total"

注意：使用此種模式坠敷，必須寫成update:myPropName

總結(jié)

清楚4個(gè)修飾符

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