Vue3.x_任务清单
3、涉及知识点
麻雀虽小,五脏俱全,接下来开始我们的项目之旅吧~~
- Vue3.x基础:插值语法,常用指令,键盘事件,列表渲染,计算属性,生命周期
- Vue3.x进阶:props(父传子),自定义事件(任意组件间通信)
- Vuex4.x:状态管理库的使用
- Vue-router4.x:使用路由进行页面跳转
备注:
- 任意组件间的通信方式有很多种(全局事件总线,消息订阅预发布…),熟练掌握一种即可(推荐自定义事件,配置简单,容易理解)
- 本文是 vue 基础的练习项目,也涉及 vue 周边(Vuex,Vue-Router)
4、项目详情
main.js
- 导入 store 和 router,并且使用
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
./router/index.js
- 配置路由
- 直接导入 VS 按需导入(节约性能)
- 使用了 history 路由模式
import { createRouter, createWebHistory } from 'vue-router'
// 直接引入
import Start from '../views/Start.vue'
const routes = [
{
path: '/',
name: 'Start',
component: Start
},
{
path: '/home',
name: 'Home',
// 按需引入,节约性能
component: () => import('../views/Home.vue')
}
]
// 创建路由对象
const router = createRouter({
history: createWebHistory(process.env.BASE\_URL),
routes
})
export default router
./store/index.js
- state 中定义初始化数据
- mutations 中定义方法
import {
createStore
} from 'vuex'
export default createStore({
// 定义初始化状态
state: {
list: [
{
title: "吃饭",
complete: false,
},
{
title: "睡觉",
complete: false,
},
{
title: "敲代码",
complete: true,
},
]
},
// 同步修改 state 都是方法
// 第一个参数 state 第二个参数是需要修改的值
mutations: {
// 添加任务
addTodo(state, payload) {
state.list.push(payload)
},
// 删除任务
delTodo(state, payload) {
state.list.splice(payload, 1)
},
// 清除已完成
clear(state, payload) {
// 把过滤之后的数组传进来
state.list = payload
}
},
// 异步提交 mutation
// 第一个参数是 store 第二个参数是修改的值
actions: {
},
// 模块化
modules: {}
})
App.vue 组件
- 做呈现的组件
<router-view />
呈现内容
<template>
<router-view/>
</template>
<style lang="scss">
\* {
margin: 0;
padding: 0;
}
</style>
Start.vue 组件
- 初始化页面
- 点击开启任务,跳转到任务页面
<template>
<div class="title">
<h1>欢迎来到前端杂货铺</h1>
<button @click="start">开始任务</button>
</div>
</template>
<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
name: "Start",
setup() {
// router 是全局路由对象
let router = useRouter();
let name = ref(10);
// 点击进行路由跳转
let start = () => {
router.push({
name: "Home",
params: {
name: name.value,
},
});
};
return {
start,
};
},
};
</script>
<style lang="scss" scoped>
.title {
color: orange;
text-align: center;
margin-top: 20%;
}
button {
margin-top: 20px;
width: 100px;
height: 50px;
background: skyblue;
color: white;
font-weight: bold;
font-size: 15px;
cursor: pointer;
}
button:hover {
font-weight: bold;
background: white;
color: skyblue;
cursor: pointer;
}
</style>
Home.vue 组件
- 其他组件 表演的舞台
- 传递数据
- 自定义事件,进行组件间通信
<template>
<div class="container">
<nav-header @add="add"></nav-header>
<nav-main :list="list" @del="del"></nav-main>
<nav-footer :list="list" @clear="clear"></nav-footer>
</div>
</template>
<script>
import NavHeader from "@/components/navHeader/NavHeader";
import NavMain from "@/components/navMain/NavMain";
import NavFooter from "@/components/navFooter/NavFooter";
import { ref, computed } from "vue";
import { useStore } from "vuex";
export default {
name: "Home",
// 接收父组件的数据
props: {},
// 定义子组件
components: {
NavHeader,
NavMain,
NavFooter,
},
// 接收的数据,上下文
setup(props, ctx) {
let store = useStore();
let list = computed(() => {
return store.state.list;
});
let value = ref("");
// 添加任务
let add = (val) => {
value.value = val;
// 任务存在 不能重复添加
let flag = true;
list.value.map((item) => {
if (item.title === value.value) {
// 有重复任务
flag = false;
alert("任务已存在");
}
});
// 没有重复任务
if (flag == true) {
// 调用 mutation
store.commit("addTodo", {
title: value.value,
complete: false,
});
}
};
// 删除任务
let del = (val) => {
// 调用删除的 mutation
store.commit('delTodo', val)
console.log(val);
}
// 清除已完成
let clear = (val) => {
store.commit('clear', val)
}
return {
add,
list,
del,
clear
};
},
};
</script>
NavHeader.vue 组件
- 头部组件(输入框)
- 输入任务按下回车进行任务的添加
emit
,使用分发的事务
<template>
<div>
<div class="container">
<input
type="text"
placeholder="请输入任务名称"
v-model="value"
@keyup.enter="enter"
/>
</div>
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "navHeader",
// 接收的数据,上下文
setup(props, ctx) {
let value = ref("");
// 按回车键确认
let enter = () => {
// 把输入框的内容传递给父组件
ctx.emit("add", value.value);
// 清空输入框
value.value = "";
};
return {
value,
enter,
};
},
};
</script>
<style lang="scss" scoped>
.container {
text-align: center;
margin-top: 220px;
}
.container input {
height: 25px;
width: 200px;
margin-bottom: 10px;
}
</style>
基础面试题
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括:HTML,CSS,JavaScript,浏览器,性能优化等等
lue,
enter,
};
},
};
### 基础面试题
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
> 主要内容包括:**HTML,CSS,JavaScript,浏览器,性能优化等等**
![](https://img-blog.csdnimg.cn/img_convert/47957d8ff60ad238fb5624e4f37fd046.webp?x-oss-process=image/format,png)