Vue入门（十六）

原创已于 2022-07-06 20:25:24 修改 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js #前端框架

于 2022-07-06 16:44:03 首次发布

Vue 专栏收录该内容

29 篇文章

订阅专栏

该博客围绕Vue3实现todolist基本结构展开。先介绍实现todolist需4个组件，包括一个父组件和三个子组件，接着说明编写代码流程，如创建子组件、写代码模板、引入并应用子组件、删除全局样式等，还给出视频学习地址及正确观看顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

todolist之基本结构——实现todolist需要的4个组件

开始编写代码

准备好上一讲的代码（视频顺序有问题，文章结尾有正确的观看顺序）

创建三个子组件

课程介绍时已经说明将 todolist 拆分成4个组件——一个父组件和三个子组件

每个组件写好代码模板

<template>
	<!-- 编写 HTML 内容-->
	<div>
		
	</div>
</template>

<script>
	// 编写 js 内容
    export default{

    }
</script>

<style scoped lang="scss">
	// 编写样式内容
</style>

将子组件引入到父组件中

@是/src的别名

<script>
	// @ is an alias to /src
	import NavHeader from '@/components/navHeader/NavHeader'
	import NavMain from '@/components/navMain/NavMain'
	import NavFooter from '@/components/navFooter/NavFooter'
	import {
		defineComponent
	} from 'vue'

	export default defineComponent({
		name: 'HomeView', // 组件名称
		// 定义子组件
		components: {
			// NavHeader: NavHeader 键和名相等时可简写为 NavHeader
			NavHeader,
			NavMain,
			NavFooter
		},
	})
</script>

应用子组件

<template>
	<!-- 编写 HTML 内容-->
	<div>
		<nav-header></nav-header>
		<nav-main></nav-main>
		<nav-footer></nav-footer>
	</div>
</template>

删除全局样式

在 App.vue 文件中删除原始模板和样式，写入以下代码：

<template>
	<router-view />
</template>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}
</style>

效果：

视频学习地址：

课程导学，vue3.0实现todolist 教程-慕课网 (imooc.com)

视频的顺序有问题，正确的顺序如下：
第3章 todolist 之基本结构
视频：3-1 介绍定义组件
视频：3-3 介绍ref定义单个数据
视频：3-4 介绍reactive定义对象类型的数据
视频：3-6 介绍方法的定义和使用
视频：3-2 实现todolist需要的4个组件
视频：3-5 实现todolist每个组件需要的数据
视频：3-7 实现todolist每个组件需要的方法
视频：3-8 介绍定义状态管理
视频：3-9 实现todolist之使用状态管理的api
视频：3-10 介绍计算属性
视频：3-11 实现通过计算属性获取vuex中定义的todolist的数据