指令 Directive
<div v-text="x"></div>
<div v-html="x"></div>
以 v- 开头的东西就是指令
- 语法
v-指令名：参数 = 值 ， 如
v-on: click=add
如果值里没有特殊字符，则可以不加引号；
有些指令没有参数和值， 如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
快捷键相关 .ctrl .alt .shift .meta .exact
鼠标相关 .left .right .middle
v-bind 支持的修饰符：
.sync .prop .camel
v-model 支持的修饰符:
.lazy .number .trim
.sync 修饰符
组件不能修改 props 外部数据
event 可以获取$emit的参数
.sync功能：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中；使用
update:myPropName模式触发事件，实现双向绑定
//父组件代码
<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>
</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 的假设的组件中，通过以下方式赋予新值：
$emit('update:money', money-100)
// this.$emit 可以触发事件，并传参
然后父组件可以监听事件并根据需要更新一个本地的数据属性
<Child :money="total" v-on:update:money="total = $event"/>
// $event 可以获取$emit的参数
<Child :money="total" @update:money="total = $event"/>
为了方便起见，这种模式可以缩写，即 .sync 修饰符：
<Child :money.sync="total"/>
