【愚公系列】《循序渐进Vue.js 3.x前端开发实践》007-Vue 模板与应用：循环渲染
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在现代前端开发中，Vue.js以其简洁易用和高效的特性，成为了众多开发者的首选框架。无论是构建复杂的单页应用，还是简单的动态网页，Vue都能轻松应对。其中，循环渲染是Vue中一项非常实用的功能，它使得我们能够高效地处理和展示列表数据。
在本篇文章中，我们将深入探讨Vue的循环渲染机制，包括其基本用法、常见场景以及在实际开发中的应用技巧。通过实例讲解，我们希望能帮助读者更好地理解如何运用循环渲染来提升项目的开发效率和用户体验。无论你是Vue的新手，还是希望进一步提升技能的开发者，这篇文章都将为你提供宝贵的见解。
让我们一起探索Vue的循环渲染世界，揭开它背后的魅力与奥秘吧！
🚀一、循环渲染
在网页中，列表是一种非常常见的组件。在列表中，每一行元素都有相似的UI，只是其填充的数据有所不同，使用Vue中的循环渲染指令，我们可以轻松地构建出列表视图。
🔎1.v-for 指令的使用方法
这个代码是一个使用 Vue 3 创建的简单 Web 应用程序，主要功能是通过 Vue 的模板语法渲染一些列表数据，并提供一些交互（如逆序列表）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环渲染</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
<ul>
<template v-for="(item,index) in handle(list)">
<div>{{index + "." + item.name}}</div>
<div>{{item.num}}</div>
</template>
</ul>
<ol>
<li v-for="(value,key,index) in preson" :key="index">
{{index}}-{{key}}:{{value}}
</li>
</ol>
<div v-for="n in 5">
重复次数：{{n}}
</div>
<!-- <div v-for="n in 5" v-if="n!=3">
重复次数：{{n}}
</div> -->
<button @click="click">
逆序
</button>
</div>
<script>
const {createApp, ref} = Vue
// 定义一个Vue组件
const config = {
setup() {
const list = ref([
{name: "珲少", num: "151xxxxxxxx"},
{name: "Jaki", num: "151xxxxxxxx"},
{name: "Lucy", num: "151xxxxxxxx"},
{name: "Monki", num: "151xxxxxxxx"},
{name: "Bei", num: "151xxxxxxxx"}
])
const preson = ref({
name: "珲少",
age: "00",
num: "151xxxxxxxx",
emali: "xxxx@xx.com"
})
const click = () => {
list.value.reverse()
}
const handle = (l)=> {
return l.filter(obj => obj.name != "珲少")
}
return {list, preson, click, handle}
}
}
createApp(config).mount("#Application")
</script>
</body>
</html>
🦋1.1 HTML 结构
<!DOCTYPE html><html lang="en">...</html>是标准的 HTML 结构，指定页面语言为英文。<meta charset="UTF-8">：定义字符集为 UTF-8。<meta http-equiv="X-UA-Compatible" content="IE=edge">：用于 IE 浏览器兼容性模式。<meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口宽度，以便页面在移动设备上良好显示。<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>：导入 Vue 3 的全局脚本。
🦋1.2 Vue 应用部分
☀️1.2.1 #Application div
这个 div 是 Vue 应用的根元素，Vue 实例会挂载在这个 id="Application" 的元素上。
☀️1.2.2 v-for 循环
-
<template v-for="(item,index) in handle(list)">: 使用v-for指令遍历list数组，通过handle函数过滤后渲染。每个item代表list中的一个对象，index是其对应的索引。{{index + "." + item.name}}：渲染索引加上item.name的值。{{item.num}}：渲染item.num。
-
<ol><li v-for="(value,key,index) in preson" :key="index">: 遍历preson对象，value是对象的值，key是键名，index是顺序号。{{index}}-{{key}}:{{value}}：将对象的键值对和索引显示出来。
-
<div v-for="n in 5">: 简单循环 5 次，渲染n值。重复次数：{{n}}：显示当前循环次数。
☀️1.2.3 按钮的点击事件
<button @click="click">: 当点击按钮时，调用click方法，触发list.value.reverse()使list数组逆序显示。
🦋1.3 Vue 应用的 JavaScript 逻辑
const {createApp, ref} = Vue
使用 Vue 3 的 createApp 创建应用，ref 用于声明响应式变量。
☀️1.3.1 响应式数据
const list = ref([ ... ])
const preson = ref({ ... })
list是一个数组，包含一些用户信息（name和num）。preson是一个对象，保存了某个用户的详细信息（如name、age、num和email）。
☀️1.3.2 方法
click: 通过调用list.value.reverse()逆序显示list中的元素。handle: 过滤list，去掉name为 “珲少” 的元素。
☀️1.3.3 Vue 实例创建
createApp(config).mount("#Application")
通过 createApp(config) 创建 Vue 应用，并将其挂载到 #Application 的 DOM 元素上。
🦋1.4 总结
这个应用展示了如何通过 Vue 3 渲染一个列表，过滤数据，遍历对象，执行简单的用户交互（如逆序按钮），并通过响应式的数据结构来管理列表和对象的状态。
🔎2.v-for 指令的高级用法
当我们使用 v-for 对列表进行循环渲染后，实际上就实现了对这个数据对象的绑定。当我们用下面这些函数对列表数据对象进行更新时，视图也会对应地更新：
以下是 JavaScript 中的数组操作方法的详细解释：
🦋2.1 push()
作用： 向数组的末尾添加一个或多个元素。
语法：
array.push(element1, ..., elementN)
示例：
let arr = [1, 2, 3];
arr.push(4); // [1, 2, 3, 4]
🦋2.2 pop()
作用： 删除数组最后一个元素，并返回该元素。
语法：
array.pop()
示例：
let arr = [1, 2, 3];
let last = arr.pop(); // arr = [1, 2], last = 3
🦋2.3 shift()
作用： 删除数组第一个元素，并返回该元素。
语法：
array.shift()
示例：
let arr = [1, 2, 3];
let first = arr.shift(); // arr = [2, 3], first = 1
🦋2.4 unshift()
作用： 在数组的开头添加一个或多个元素，并返回新数组的长度。
语法：
array.unshift(element1, ..., elementN)
示例：
let arr = [2, 3];
arr.unshift(1); // arr = [1, 2, 3]
🦋2.5 splice()
作用： 对数组进行添加、删除、或替换操作。可以在任意位置插入、删除、或替换元素。
语法：
array.splice(start, deleteCount, item1, ..., itemN)
start: 要修改的起始位置。deleteCount: 删除的元素数量。item1, ..., itemN: 要添加到数组中的元素。
示例：
let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 6); // arr = [1, 2, 6, 4, 5]，在索引2的位置删除1个元素并插入6
🦋2.6 sort()
作用： 对数组进行排序。默认按字符串进行排序，可以通过提供比较函数来自定义排序方式。
语法：
array.sort([compareFunction])
示例：
let arr = [3, 1, 4, 1, 5];
arr.sort(); // 默认按照字符顺序排序 arr = [1, 1, 3, 4, 5]
// 自定义数字排序
arr.sort((a, b) => a - b); // arr = [1, 1, 3, 4, 5]
🦋2.7 reverse()
作用： 反转数组元素的顺序。
语法：
array.reverse()
示例：
let arr = [1, 2, 3];
arr.reverse(); // arr = [3, 2, 1]
🦋2.8 总结
push()和pop()操作的是数组的尾部。shift()和unshift()操作的是数组的头部。splice()可以进行删除、插入或替换操作。sort()用于排序，reverse()用于逆序排列。
- 点赞
- 收藏
- 关注作者
评论（0）