持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第三天
1 v-for 列表渲染
列表渲染
从服务器拿到一组数据,并且需要对其进行渲染
这个时候我们可以使用v-for来完成
v-for类似于Js中的for循环 可以用于遍历一遍数据
v-for基本使用
v-for的基本格式是" item in 数组 ":
数组通常来自 data或者 prop 也可以是其他方式
item是我们给每项元素起的别名,这个别名可以自定义
遍历数组的时候经常需要拿到****数组的索引
需要索引 可以使用格式: "(item,index) in 数组"
注意上面的顺序:数组元素项item是在前面的,索引项index是在后面的
<!-- 1 电影列表进行渲染 --> <h2>电影列表</h2>
<ul>
<li v-for="movie in movies">{{movie}}</li>
</ul>
<!-- 2 电影列表同时有我们的索引 --> <ul>
<li v-for="(movie,index) in movies">{{index+1}}-{{movie}}</li>
</ul>
<!-- 3 遍历数组 复杂数据 --> <h2>商品列表</h2>
<!-- 可以解构 --> <div class="item" v-for="{id,name,price,desc} in products">
<h3 class="title">{{name}}</h3>
<span>价格:{{price}}</span>
<p>{{desc}}</p>
</div>
2 v-for 渲染类型
v-for支持的类型
v-for支持遍历对象,且支持有 一 二 三 个参数
一个参数: "value in object";
两个参数: "(value,key) in object"
三个参数:"(value,key,index) in object"
V-for同时支持数字的遍历 每个item都是一个数字 也可以遍历其他的可迭代对象
<div id="app">
<!-- 1 遍历数组 -->
<!-- 2 遍历对象 --> <ul>
<li v-for="(item,key,index) in info">{{item}}--{{key}}--{{index}}</li>
</ul>
<!-- 3 遍历字符串 --> <ul>
<li v-for="item in message">{{item}}</li>
</ul>
<!-- 4 遍历数字 --> <ul>
<!-- 显示1-10的数字 --> <li v-for="item in 10">{{item}}</li>
</ul>
</div>
template元素
类似于v-if 你可以使用template元素来循环渲染一段包含多个元素的内容
使用template来对多个元素进行包裹 而不是使用div来完成
3 数组更新的检测
数组更新检测
Vue将被真挺的数组变更方法进行包裹,所以它们将触发视图更新
这些被包裹过的方法包括:
push() => 数组后添加元素
pop() => 从数组后删除元素
shift() => 删除第一个元素
unshift() =>头部添加元素
splice() => 操作数组利器
sort() => 排序
resverse() => 反转数组
4 v-for的key属性
v-for中的key是什么作用?
在使用v-for进行列表渲染时 通常会给元素或者组件绑定一个 key属性
这个key属性有什么作用? 官方解释为:
key属性主要用在Vue的虚拟DOM算法,在 新旧nodes对比时辨认VNodes
如果 不使用key Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地 修改/复用相同类型元素的算法
使用key时 它会基于key的变化 重新排列元素顺序 并且 移除/销毁key 不存在的元素
认识VNode
先来解释一下VNode的概念:
目前,先理解HTML元素创建出来VNode
VNode的全称是Virtual Node 也就是 虚拟节点
事实上,无论是组件还是元素 最终在Vue表现出来的都是一个个VNode
VNode的本质就是一个Js对象
5 Vue的虚拟DOM
虚拟DOM
如果我们不只是一个简单的div 而是一大堆的元素 那么它们应该会形成一个VNode Tree
