这是我参与「第五届青训营」伴学笔记创作活动的第 14 天，今天在开发组队大项目的过程中，继续学习了如何从头开发一个 Vue 3 的项目，包括 Vue 3 的基础语法等。
列表渲染
有时候我们可能需要重复渲染某个组件或者元素多次，Vue 为我们提供了列表渲染来方便我们的重复渲染工作。
v-for 指令用于数组
使用 v-for 指令可以基于一个数组来渲染一系列元素，每个数组项对应一个元素。
v-for 指令的基础用法为：
<li v-for="item in items">
{{ item.message }}
</li>
v-for 指令中使用 item in items 形式的特殊语法。其中 items 为数据源，为一个数组。item 为每次迭代中数组元素的别名，在元素内可以通过 item 访问本次迭代的一个数组项。
可以使用 of 作为分隔符来替代 in：
<div v-for="item of items"></div>
v-for 指令中还可以使用 (item, index) in items 形式的特殊语法。其中第二个参数 item 表示本次迭代的一个数组项的索引位置。
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
v-for 指令用于对象
当 v-for 指令用于遍历对象时，可以使用 (value, key, index) in object 形式的特殊语法。Vue 会为每个键值对渲染一遍元素。
其中 value 为键值对中值的别名，key 为键值对中键的别名，index 为当前渲染的元素的索引。
<li v-for="(value, key, index) in myObject">
{{ index }}. {{ key }}: {{ value }}
</li>
v-for 指令用于整数值
v-for 可以直接接受一个整数值，Vue 会渲染这个元素整数值次。其中 n 为渲染次数的别名。注意此处渲染次数 n 的初值是从 1 开始而非 0。
<span v-for="n in 10">{{ n }}</span>
在 <template> 标签上使用 v-for
在模板内部，可以使用 <template> 包裹多个标签，并在 <template> 标签上使用 v-for 指令。这些标签会一同重复渲染。渲染的结果中不会出现 <template> 标签。
v-for 与 v-if 同时使用
不推荐。
若 v-for 与 v-if 同时使用，则 v-if 优先级更高，会优先执行。也就是说，无法在 v-if 中访问 v-for 中定义的别名。
如果需要 v-for 与 v-if 同时使用，需要将 v-for 应用在 <template> 标签上，然后使用 <template> 标签包裹原来的元素。
key 属性
v-for 通常需要搭配 key 属性来使用。
key 属性用来指定 v-for 渲染的每个元素的唯一标识。key 属性应该绑定一个数字或者字符串。
