事务管理案例

前言

这篇文章介绍vue组件基础的一个小案例！
案例用到的知识点如下：
① vite 创建项目
② 组件的封装与注册
③ props
④ 样式绑定
⑤ 计算属性
⑥ 自定义事件
⑦ 组件上的 v-model
废话不多说，直接上刺刀！！

演示：

可以实现添加新事物以及切换状态

项目结构如图：

初始化项目

1. 在终端运行以下的命令，初始化 vite 项目：

npm init vite-app todos
1

2. 使用 vscode 打开项目，并安装依赖项：

npm install
1

3. 安装 less 语法相关的依赖项：

npm i less -D
1

4. 重置 index.css 中的全局样式如下：

:root {
 	font-size: 12px; 
 }
body {
 	padding: 8px;
 }
1
2
3
4
5
6

在终端运行以下的命令，把项目运行起来：

npm run dev
1

主要代码：

main.js

import { createApp } from 'vue'
import App from './App.vue'

// 导入bootstrap
import './assets/css/bootstrap.css'
import './index.css'

createApp(App).mount('#app')

1
2
3
4
5
6
7
8
9

根组件：app.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

页面切换状态的按钮组件：todobutton.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

添加新事务部分组件：todoinput.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

渲染事务列表组件：todolist.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

完整源码打包在gitee：

https://gitee.com/xingyueqianduan/shiwudemo
1

写在最后

✨个人笔记博客✨

星月前端博客
https://xingyue.vercel.app/

✨原创不易，还希望各位大佬支持一下

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️评论，你的意见是我进步的财富！