v-for

遍历对象

• 第一个参数是被迭代对象的属性值（也就是键值value）
• 第二个参数是被迭代对象的属性名（也就是键名key）

• 第三个参数是索引，从0开始

  维护状态

  Vue默认采取“就地更新”策略更新组件的值，这个默认的模式是高效的。如果为了能够重用和重新排序现有元素，需要使用 key 属性。使用 key 的组件不会被修改而会被替换。

• 就地更新

• 采取 key 属性

表单输入绑定

v-model 负责监听表单中用户的输入事件，更新数据

<div id="app">
    <!-- 绑定输入到message -->
    <input v-model="message">
    <p>Message is: {{ message }}</p>
    <!--  绑定box输入到checked -->
    <input type="checkbox" id="box" v-model="checked">
    <label for="box">{{ checked }}</label>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '',
            checked: false
        }
    })
</script>

子组件改变父组件的值

通过子组件触发事件，抛出值，父组件调用子组件事件，事件方法中更改为抛出值。

• 子组件 ```vue

- 父组件
```vue
<template>
  <div>
    <child @change="change"></child>
    <span>{{ value }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 0
    }
  },
  methods: {
    change(val) {
      this.value += val
    }
  }
}
</script>