【愚公系列】《循序渐进Vue.js 3.x前端开发实践》007-Vue 模板与应用：循环渲染

原创

愚公搬代码

发布于 2025-05-18 21:49:06

2140

文章被收录于专栏：循序渐进Vue.js 3.x前端开发实践循序渐进Vue.js 3.x前端开发实践

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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 `#Applicatio`n div

这个 div 是 Vue 应用的根元素，Vue 实例会挂载在这个 id="Application" 的元素上。

☀️1.2.2 `v-fo`r 循环

<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() 用于逆序排列。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S13

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S13

登录后参与评论

0 条评论

热度