vue3事务管理案例、组件基础总结案例

事务管理案例

前言

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

演示：

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

项目结构如图：

初始化项目

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

npm init vite-app todos

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

npm install

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

npm i less -D

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

:root {
 	font-size: 12px; 
 }
body {
 	padding: 8px;
 }

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

npm run dev

主要代码：

main.js

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

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

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

根组件：app.vue

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

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

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

完整源码打包在gitee：

https://gitee.com/xingyueqianduan/shiwudemo

写在最后

✨个人笔记博客✨

星月前端博客
http://blog.yhxweb.top/

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

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

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

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