一、模板的三种写法

第一种.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")