Vue 指令、修飾符

指令 Directive

<div v-text="x"></div>
<div v-html="x"></div>

以 v- 開頭的東西就是指令

語法

v-指令名：參數(shù) = 值鲫趁，如 v-on: click=add

如果值里沒有特殊字符，則可以不加引號利虫；
有些指令沒有參數(shù)和值挨厚，如 v-pre；
有些指令沒有值糠惫，如v-on:click.prevent疫剃；

修飾符

@click.stop = "add" 表示阻止事件傳播/冒泡
@click.prevent = "add" 表示阻止默認動作
@click.stop.prevent = "add" 同時表示兩種意思

v-on支持的修飾符：

.stop .prevent
.{keycode | keyAlias}  .capture .self .once .passive .native
快捷鍵相關(guān) .ctrl .alt .shift .meta .exact
鼠標相關(guān) .left .right .middle

v-bind 支持的修飾符：

.sync .prop .camel

v-model 支持的修飾符:

.lazy .number .trim

.sync 修飾符

組件不能修改 props 外部數(shù)據(jù)
$emit 可以觸發(fā)事件，并傳參$ event 可以獲取$emit的參數(shù)

.sync功能：當一個子組件改變了一個 prop 的值時硼讽，這個變化也會同步到父組件中巢价；使用update:myPropName 模式觸發(fā)事件，實現(xiàn)雙向綁定

代碼示例

//父組件代碼
<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>
</style>

//子組件代碼
<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
      <span>花錢</span>
    </button>
  </div>
</template>

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

<style>
</style>

在一個包含money prop 的假設(shè)的組件中固阁，通過以下方式賦予新值：

$emit('update:money', money-100)
// this.$emit 可以觸發(fā)事件壤躲，并傳參

然后父組件可以監(jiān)聽事件并根據(jù)需要更新一個本地的數(shù)據(jù)屬性

 <Child :money="total" v-on:update:money="total = $event"/>
// $event 可以獲取$emit的參數(shù)
 <Child :money="total" @update:money="total = $event"/>

為了方便起見，這種模式可以縮寫备燃，即 .sync 修飾符：

 <Child :money.sync="total"/>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者