使用Vue 3创作六一儿童节活动界面

最新推荐文章于 2024-08-22 20:09:19 发布

DevCorner

最新推荐文章于 2024-08-22 20:09:19 发布

阅读量114

点赞数

分类专栏：前端开发案例文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_46254812/article/details/130998257

版权

前端同时被 2 个专栏收录

89 篇文章 4 订阅

订阅专栏

开发案例

3 篇文章 0 订阅

订阅专栏

本文展示了如何使用Vue3框架创建一个简单的儿童节活动页面，包括介绍如何创建组件、应用CompositionAPI来编写子组件以及使用watchEffect方法动态计算所有孩子年龄的总和。通过这个示例，读者可以了解到Vue3在性能和开发体验上的提升。

摘要由CSDN通过智能技术生成

在这个项目中，我将使用Vue 3框架来构建一个简单的儿童节活动页面。Vue 3发布了很多新功能，相比于Vue 2，在性能、组件化等方面都得到了优化。本项目会向您展示如何创建组件和使用Vue 3.0提供的新功能特性来实现这个活动页面。

创建第一个Vue 3.0应用程序

首先，我们要确保应用程序中引入Vue.js框架的正确版本并在文件中导入它。与Vue 2.x版本不同，Vue 3.0现在被打包为两个核心而不是三个，即runtime-core和reactivity。因此，我们需要将它们手动导入。

<!DOCTYPE html>
<html>
<head>
	<title>Children's Day Activities</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<h1>{{ message }}</h1>
		<p>我们即将迎来六一儿童节！</p>
	</div>

	<script>
		const { createApp } = Vue;

		createApp({
			data() {
				return {
					message: "欢迎参加我们的儿童节活动！"
				}
			}
		}).mount("#app");
	</script>
</body>
</html>

在上面的代码中，我们创建了一个Vue实例，并使用createApp()构造函数创建它。我们还将Vue实例附加到页面中的元素中。

该实例具有一个数据属性message。我们可以使用双花括号语法({{ }})将这个变量绑定到HTML模板中，这样变量绑定就会自动更新，根据我们通过data()方法传入的值。

使用Composition API

Vue 3引入了一种新的API，称为composition API。它是一个基于函数而不是选项对象的API，使代码更易于组合和复用。接下来让我们尝试使用它来创建一个子组件 - 小朋友列表组件。

<!DOCTYPE html>
<html>
<head>
	<title>Children's Day Activities</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<h1>{{ message }}</h1>
		<p>我们即将迎来六一儿童节！</p>
        <child-list :children="children"></child-list>
	</div>

    <template id="child-list-template">
        <ul>
            <li v-for="child in children" :key="child.id">{{ child.name }}（{{ child.age }}岁）</li>
        </ul>
    </template>

	<script>
        const ChildList = {
            props: {
                children: {
                    type: Array,
                    required: true
                }
            },
            template: "#child-list-template"
        }

		const { createApp, ref } = Vue;

		createApp({
			data() {
				return {
					message: "欢迎参加我们的儿童节活动！",
					children: [
                        { id: 1, name: "小王", age: 5 },
                        { id: 2, name: "小张", age: 6 },
                        { id: 3, name: "小李", age: 4 },
                        { id: 4, name: "小赵", age: 7 }
                    ]
				}
			},
            components: {
                ChildList
            }
		}).mount("#app");
	</script>
</body>
</html>

在上面的代码中，我们创建了一个子组件ChildList。它拥有一个名为children的props，来接收外部数据。我们利用v-for指令和:key绑定，将数据渲染进HTML模板中。

使用Vue 3中提供的createApp()构造函数，我们创建了一个根实例并注册了一个通用的ChildList组件。在这个实例中，我们还定义了一个名为children的数组，并通过子组件的props属性将其传递给子组件。

同时，在ChildList组件内也没有this对象，我们可以使用ref()来定义一个响应式数据，然后在模板使用它。

使用Composition API中的watchEffect()

使用watchEffect()方法，我们可以对data()中的变量进行监听并执行副作用函数。

我们使用这个方法来根据所有孩子的年龄创建一个名为ageSummary的计算变量，并在视图中显示它。

<!DOCTYPE html>
<html>
<head>
	<title>Children's Day Activities</title>
	<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
	<div id="app">
		<h1>{{ message }}</h1>
		<p>我们即将迎来六一儿童节！</p>
        <child-list :children="children"></child-list>
        <div>所有孩子的年龄总和: {{ ageSummary }}</div>
	</div>

    <template id="child-list-template">
        <ul>
            <li v-for="child in children" :key="child.id">{{ child.name }}（{{ child.age }}岁）</li>
        </ul>
    </template>

	<script>
        const ChildList = {
            props: {
                children: {
                    type: Array,
                    required: true
                }
            },
            template:"#child-list-template"
        }
 		const { createApp, ref, watchEffect } = Vue;
 		createApp({
			data() {
				return {
					message: "欢迎参加我们的儿童节活动！",
					children: [
                        { id: 1, name: "小王", age: 5 },
                        { id: 2, name: "小张", age: 6 },
                        { id: 3, name: "小李", age: 4 },
                        { id: 4, name: "小赵", age: 7 }
                    ],
                    ageSummary: 0
				}
			},
            components: {
                ChildList
            },
            mounted() {
                watchEffect(() => {
                    this.ageSummary = this.children.reduce((total, child) => total + child.age, 0);
                });
            }
		}).mount("#app");
	</script>
</body>
</html>