画布 1
列表渲染v-for
  基于一个数组来渲染一组元素
    1. 需要使用 item in items 形式的特殊语法
    2. items表示源数据数组， item 则是被迭代的数组成员的别名
    3. v-for 还支持第二个参数，表示当前项的索引
    4. 可以用 of 替代 in
  基于一个对象来渲染一组元素
    1. 形式跟数组差不多，也是 val in obj
    2. obj表示源数据对象，val表示obj中的每个属性对应的值
    3. 也可以支持第二个参数，表示属性名称
    4. 还可以用第三个参数，表示索引
    5. 注意：在遍历对象时，会按 Object.keys() 的结果遍历。因此在不同的js引擎下，结果可能有差异
  维护状态
    1. 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
    2.为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key属性
  数组更新检测
    1. 变更方法
      Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新
      这些被包裹过的方法包括
        push()、pop()、shift()、unshift()、splice()、sort()、reverse()
    2. 替换数组
      比如filter()、concat() 和 slice()它们不会变更原始数组，而总是返回一个新数组
      当使用非变更方法时，可以用新数组替换旧数组
      Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作
  显示过滤/排序后的结果
    有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际变更或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组
  在 v-for 里使用值的范围
    v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数
  在 <template> 中使用 v-for
    类似于 v-if，你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容
  v-for 与 v-if 一同使用
    1. 不推荐在同一元素上使用 v-if 和 v-for
    2. 但可以父元素使用v-if，子元素使用v-for；或者父元素使用v-for，子元素使用v-if，具体看情况使用
  这里开始