2018-03-26

计算属性的getter和setter我打算先放一放

列表渲染(一)

我们需要用v-for指令根据一组数组的选项列表进行渲染。item in items,items是源数据数组并且item是数组元素迭代的别名。

  • 在v-for块中我们拥有对父作用域属性的完全访问权

这一点今天还真遇到了,有一个值,需要的数据还真不是在该v-for块中。使用方法是:变量前不同加item,直接绑定需要的数据。

  • v-for还支持一个可选的第二个参数为当前项的索引,即:(item, index)in items index 从0开始计算。

说到index我记得我在我们项目的代码及看到过:<div v-for="(item, index)in items" :key=index>这种写法,我不知道对不对,因为key绑定的时唯一的标识。这个唯一的参照物如果是该数组,那就没问题。否则就不行。

  • 我们可以用of 代替in来作为分隔符。

这里我觉得没有什么重点。只是说可以有两种写法,有什么区别到时没有说。

  • 我们可以用v-for通过一个对象的属性来迭代。
    文中给出这段代码:
<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

我感觉还是大多数都是会用数组,我没用过对象的属性来迭代,了解较少。但是从案例上来看,用对象来看,该方法不太适合渲染比较复杂的HTML段落。

  • 对象迭代 可以提供两个参数:键名&索引。
key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。

这段话我的理解是:我们再更新数组中的数据时或改变数据项位置的时候,vue不会吧所有的元素都重新渲染,只渲染被改变的元素,其它的元素复用。

key需要用v-vind。其功能是给vue一个提示。以便它跟踪每个节点的身份。其目的是重用和重新排序现有元素。要求是相对唯一id. 文档建议尽可能在使用 v-for 时提供 key。

我觉得key就是vue定义的给数据的一个身份,文档中也说了:它是 Vue 识别节点的一个通用机制,key 并不与 v-for 特别关联,key 还具有其他用途

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ——我、孩子和金鱼的故事 宝轮一小 孙水仙 开学就给孩子承诺,要在班级养金鱼。鱼缸早早地就放在了讲桌上,卖金鱼的小...
    豆蔻蝶仙阅读 3,064评论 0 4
  • 人的大脑都是根据自己形成的记忆痕迹来评判事情的,加上自己的观点。这是从小父母的观点影响的结果,从小每个人对任何事并...
    进阶阶段阅读 3,823评论 0 1
  • 文/枯城 再次见到朝华,已隔十年。 她带着两个小孩,一大一小,大的约莫6岁,走在身边,小的大概一岁,仍抱在怀里...
    计量青年杂志社阅读 3,180评论 4 4
  • 晚饭过后,天色尚早,便沿着乡间小道缓步徐行。忽然,眼前飞过一只捕食的蝙蝠,我心头一惊,哦,春天来了!当我返...
    红梅赞_af47阅读 1,391评论 0 1