指令-Directive
什么是指令？
以v-开头的就是指令
语法：v-指令名:参数=值,如v-on:click=add
如果只里面没有特殊字符，则可以不加引号。
特殊：
修饰符
用来修饰指令
@click.stop="add"表示阻止事件传播@click.prevent="add"表示阻止默认动作@click.stop.prevent="add"表示阻止两种的意思修饰符有很多
重点
.sync修饰符以下代码是非完整版的Vue
来看代码
父组件中
<template> <div class="app"> App.vue 我现在有{{total}} <hr> <Child :money="total"/> </div> </template> <script> import Child from "./Child.vue"; export default { data() { return { total:10000 }; }, components: { Child } }; </script>
1234567891011121314151617子组件中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> 1234567891011121314
props:["money"]接收外部数据，money
需求：子组件想花钱，点击一次，花100块，但是现在钱不在儿子身上，在父亲身上，怎么搞。
用订阅发布模式，eventbus
<Child :money="total" v-on:update:money="total = $event"/>
<button @click="$emit('update:money', money - 100)">
点击button，触发事件update:money事件名就是update:money，就是一个字符串，然后父组件通过$event拿到事件的值
使用了.sync就可以这样写
<Child :money.sync="total"/>
v-on:update:money="total = $event"—>.sync
Vue的规则
组件不能修改props外部数据$emit可以触发事件，并传参 e v e n t 可 以 获 取 event可以获取 event可以获取emit的参数（$event就是子组件中的money-100的值，然后赋值给父组件中的total）总结
搞清楚
@click.stop = "xxx"@click.prevent="xxx"@keypress.enter="xxx":money.sync="total"即可，@keypress.enter="xxx"上面没有记录
