Vue3实战案例知识点全面推荐收藏超详细及附知识点解读

news2024/11/16 16:46:33

最近经常用到vue中的一些常用知识点，打算系统性的对 vue3 知识点进行总结，方便自己查看，另外也供正在学习 vue3 的同学参考，本案例基本包含 Vue3所有的基本知识点，欢迎参考，有问题评论区留言，谢谢。

本项目主要还是四个章节

1.项目结构创建

2.页面组件的划分

3.页面组件实现

3.1NavHeader.vue组件

3.2NavMain.vue组件

3.3 NavFooter.vue组件

3.4 Router部分

3.5 vuex中store部分

3.6 父组件Home.vue部分

3.7 Start.vue组件比较简单

4.业务功能实现

4.1初始页面

4.2 操作任务

4.3添加任务

4.4输入已存在任务

4.5.清除已完成

4.6任务全部完成

1.项目结构创建

这个部分在前面已经写过了，这里就简单提一下，详细的vue项目环境搭配及创建新的项目请参考：VUE 3.0 如何新建项目详细教程附环境搭建推荐-CSDN博客

在命令行输入 vue create todolist 其中 todolist 是你所新建的项目名称，安装包下载成功界面如图所示。

编辑器打开会看到vue脚手架创建默认项目的结构。编辑器配置参考： vscode编辑器下载安装配置

打开命令行输入npm run serve运行项目

2.页面组件的划分

本次项目主要组件以及项目结构如图所示，我这里分成了4个部分，第一个部分是本次项目用到的子组件，第二部分是路由用到的文件 router/index.js，第三部分是状态管理store/index.js，第四部分是父组件Home.vue 以及文件入口start文件，detail组件。

3.页面组件实现

这部分介绍各个页面的主要代码。

3.1NavHeader.vue组件

NavHeader部分代码，这部分主要是一个输入框，用户输入框输入内容点击enter键获取数据，添加到列表任务栏中。这里输入框内value的值做了双向绑定，组件拿到输入框的值再通过事件分发传递给父组件，父组件拿到子组件传递过来的数据，判断任务列表是否存在，如果已存在则提示'任务已存在'，不存在则添加至任务列表中。

关于父子组件传值已经介绍过请参考：vue3.0 入门基础知识汇总【2】全面精简推荐-CSDN博客

3.2NavMain.vue组件

NavMain这部分代码主要是用来展示任务列表的，主要知识点

条件渲染 v-if 指令
v-for 循环遍历数组，
接收父组件传值，
给子组件传值，
数据的双向绑定 v-model、
元素绑定事件@click

该页面list数据是通过vuex中的store 文件存储的数据获取的，组件遍历list的值，并把数组的index当成key值。任务列表是否勾选的值做了双向绑定。{{item.title}}文本插值表达式就是对应任务名称，删除按钮绑定删除事件并把要删除的任务以及对应的下标作为参数执行del方法，子组件通过事件分发把待删除的任务的下标传递给父组件

如图所示，父组件接收到子组件传递过来的值，向vuex 的store提交deTodo方法，删除对应的任务。

3.3 NavFooter.vue组件

3.4 Router部分

这里开始部分是Start组件，开始任务，演示了vue3项目中router部分。

关于router部分相关知识前面已经写过请参考：如何配置跳转路由

3.5 vuex中store部分

3.6 父组件Home.vue部分

3.7 Start.vue组件比较简单

这部分主要是为了说明路由这一块，从这里开始项目。

<template>
    <div>
        <button @click="start">
            开始任务
        </button>
    </div>
</template>
<script>
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent ({
        name:'Start',
        setup () {
            let router = useRouter()
            let start = () => {
                router.push({
                    path:'/home'
                })
            }
            return {
                start
            }
        }
})
</script>

<style>
</style>