第五节 模板、指令与修饰符
2020-08-25 本文已影响0人
darkTi
一、模板的三种写法
第一种.png
第二种.png
第三种.png
- 第三种里面，
<template></template>不是html，它只是一个标签，用来包裹东西的，<template></template>里面的也不是HTML，而是XML（因为XML更容易写编译器）；一般里面的最外层div不需要给它id； - 那么HTML与XML的区别是：
①HTML比较松散，半闭合标签可以有“/”也可以没有“/”；例如<input name="username">和<input name="username" />都是正确的；而在XML里，必须有“/”；
②HTML中的<div></div>和XML中的<div />是一样的，就是一个空标签；
image.png
二、内容展示
1、内容展示
image.png
2、 循环
v-for.png
三、指令
directive.png
修饰符.png
四、.sync修饰符
1、 .sync修饰符就是“同步”的意思，文档里是这样说的；就是子组件改变prop时，父组件的值也会同步变化；
image.png
- 首先，子组件是不能擅自修改外部传来的值的（就是prop的变量值），但是它可以使用它呀，触发一个事件并传参出去，这个传出去的参数你就可以自己设定啦（所以肯定可以设定成跟这个prop有关的值啊），然后父组件就会收到你传的这个参数啦~参考下面的例子，点击“存100”按钮时，父组件的值与子组件同步改变；但是这样写好麻烦，所以尤雨溪直接创建了一个修饰符
.sync，所以<Deposit :my-money.sync="allMoney" />这句等价于<Deposit :my-money="allMoney" @update:money=" allMoney = $event "/>； - 还有一点要注意的是，子组件中的$emit事件名一定是“update:props变量名”形式！！！
<div id="app">
VV银行，你的余额：{{allMoney}}
<Deposit :my-money="allMoney" @update:money=" allMoney = $event "/>
// 上面这句和下面的意思一样，这就是.sync的用法
<Deposit :my-money.sync="allMoney" />
</div>
Vue.component('Deposit',{
template:`<div>我的余额有：{{myMoney}}
<button @click="save">存100</button>
</div>`,
props:['myMoney'],
methods:{
save(){
//！！！这里一定要写成“update:props变量名”
this.$emit('update:myMoney',this.myMoney + 100)
}
}
})
new Vue({
data: {
allMoney: 10000
}
}).$mount("#app")
image.png
image.png
