vue3项目

 

案例用到的知识点如下:
① vite 创建项目
② 组件的封装与注册
③ props
④ 样式绑定
⑤ 计算属性
⑥ 自定义事件
⑦ 组件上的 v-model
 

 

 

效果如下图;

 

 

 

页面2

 

 

项目结构:

 

 

初始化项目
在终端运行以下的命令,初始化 vite 项目:

 

npm init vite-app todos

 



使用 vscode 打开项目,并安装依赖项:

 

npm install

 



安装 less 语法相关的依赖项:

 

npm i less -D


 

 


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

 

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

 

 



在终端运行以下的命令,把项目运行起来:

 

npm run dev

 

mian.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

 

<template><ul class="list-group container"><li class="list-group-item active" aria-current="true">星月事务管理</li></ul>
<div class="container container1"><todoInput @add="getadd"></todoInput><todo-list :list="taskList"></todo-list><todoButton :addb="mbstatus" @addb="onsta" v-model:addb="onsta"></todoButton>
</div>
</template><script>
import todoList from './components/todolist/todolist.vue'
import todoInput from './components/todoinput/todoinput.vue'
import todoButton from './components/todobutton/todobutton.vue'export default {name: 'MyApp',components:{todoList,todoInput,todoButton},data() {return{nextid:6,mbstatus:0,todoList:[{ id:1,task:'周一早晨9点开会',done:false },{ id:2,task:'周二早晨9点开会',done:true },{ id:3,task:'周三早晨9点开会',done:false },{ id:4,task:'周四早晨9点开会',done:true },{ id:5,task:'周五睡觉',done:true },]}},methods:{// 把输入框的信息添加到todolist中getadd(e){this.todoList.push({id:this.nextid,task:e,done:false})this.nextid++},// 接收子组件传递的状态,并赋值给按钮的状态,实现按钮的切换onsta(e){// console.log(e)this.mbstatus = e}},computed:{taskList(){// if ---else方法// if(this.mbstatus === 0) {//   return this.todoList// }else if(this.mbstatus === 1){//   return this.todoList.filter(x=>x.done)// }else{//   return this.todoList.filter(x=>!x.done)// }// switch --- case 方法switch(this.mbstatus){case 0: {return this.todoList}case 1:{return this.todoList.filter(x=>x.done)}case 2:{return this.todoList.filter(x=>!x.done)}}}}
}
</script>
<style lang="less" scoped>
.list-group{max-width: 400px;text-align: center;
}
.container1{margin-top: 20px;
}
</style>

 

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

 

<template>
<div class="btn-group container" role="group" aria-label="Basic example"><button type="button" class="btn" :class="addb===0?'btn-primary':'btn-secondary'" @click="onsta(0)">全部</button><button type="button" class="btn" :class="addb===1?'btn-primary':'btn-secondary'" @click="onsta(1)">已完成</button><button type="button" class="btn" :class="addb===2?'btn-primary':'btn-secondary'" @click="onsta(2)">未完成</button>
</div>
</template><script>
export default {name:'TodoButton',// 自定义需要绑定的事件addbemits:['addb'],props:{addb:{type:Number,required:true,default:0}},methods:{// 把当前点击按钮的状态传递给app父组件// 通过$emit自定义事件子传父,实现双向绑定onsta(e){// console.log(e)if(e === this.addb)returnthis.$emit('addb',e)}}
}
</script><style lang="less" scoped>
.btn-group{max-width: 400px;margin-top: 20px;text-align: center;
}
</style>

 

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

 

 

<template>
<ul class="list-group"><li class="list-group-item d-flex justify-content-between align-items-center" v-for="item in list" :key="item.id"><div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input" :id="item.id" v-model="item.done"><label class="custom-control-label" :for="item.id" :class="item.done ?'ftdelete':''">{{ item.task }}</label></div><span class="badge badge-success badge-pill" v-if="item.done">已完成</span><span class="badge badge-warning badge-pill" v-else>未完成</span></li>
</ul>
</template><script>
export default {name:'todoList',data(){return{ftdelete:'ftdelete'}},props:{list:{type:Array,required:true,default:[]}},// created(){//   this.list.forEach(e=>{//     // console.log(e)//     if( e.done === true ){//       e.done = false//     }else{//       e.done = true //     }//   })// }
}
</script><style lang="less" scoped>
.list-group{max-width: 400px;.ftdelete{text-decoration: line-through;}
}
</style>

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/2870160.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

前端跨平台开发框架:简化多端开发的利器

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

十四、Nacos源码系列:Nacos配置发布原理

目录 一、简介 二、加密处理 三、发布配置 3.1、插入或更新配置信息 3.2、发布配置数据变动事件 3.2.1、目标节点是当前节点 3.2.2、目标节点非当前节点 四、总结 一、简介 一般情况下&#xff0c;我们是通过Nacos提供的Web控制台登录&#xff0c;然后通过界面新增配置…

苹果Vision Pro官方应用商店(网页版)正式上线

该网站为用户提供了丰富多样的应用资源,包括娱乐、教育、健康、购物、工具等各种类型的应用和游戏。 1、Apps & Games Arcade:提供各种应用和游戏,包括最新推出的、热门的以及专门为Apple Vision Pro设计的应用和游戏。 2、What’s New:展示最新推出的应用和游戏,让…

第388场 LeetCode 周赛题解

A 重新分装苹果 排序 class Solution { public:int minimumBoxes(vector<int> &apple, vector<int> &capacity) {int s accumulate(apple.begin(), apple.end(), 0);sort(capacity.begin(), capacity.end(), greater<int>());int res 0;for (int c…

STM32系列——F103C8T6 控制SG90舵机(HAL库)

文章目录 一、舵机控制原理二、.CubeMX配置配置RCC、SYS、时钟树配置RCC配置SYS配置时钟树配置定时器产生PWM波形 Keil5代码接线图及效果如果您发现文章有错误请与我留言&#xff0c;感谢 一、舵机控制原理 舵机的控制一般需要一个20ms左右的时基脉冲&#xff0c;该脉冲的高电平…

【MatLab】之:Simulink安装

一、内容简介 本文介绍如何在 MatLab 中安装 Simulink 仿真工具包。 二、所需原材料 MatLab R2020b&#xff08;教学使用&#xff09; 三、安装步骤 1. 点击菜单中的“附加功能”&#xff0c;进入附加功能管理器&#xff1a; 2. 在左侧的“按类别筛选”下选择Using Simulin…

基于Springboot+Redis+mysql实现的闲置二手交易网站管理系统

1.1 背景分析 二手商品是学生比较青睐的廉价商品&#xff0c;网站设计应着重突出实用和廉价。也有一部分消费者是淘宝者&#xff0c;他们对相中的商品有着急切的拥有欲望。网上交易的好学生提供一个供需平台&#xff0c;学生可以将自己不用的东西放在网上&#xff0c;也可在网…

通过更新路书当前坐标下marker的icon来展示沿途的风景

通过更新路书当前坐标下marker的icon来展示沿途的风景 1.效果图2.[工程链接](https://download.csdn.net/download/m0_61864577/88978866)3.需修改地方: 本文演示了如何通过百度地图的路书功能,展示途经的风景。定时缩放,既有全局路径,又有当前位置和运动轨迹;可以显示当前坐标…

力扣59. 螺旋矩阵 II

思路&#xff1a;此题思路就是绕圈遍历&#xff0c;全靠条件处理技巧&#xff0c;重点要清楚的就是循环不变量&#xff1a;左闭右开&#xff08;即拐弯处的一个数&#xff0c;留给第二行处理&#xff09; 以下是代码随想录的作者的一张图片&#xff0c;每次for循环&#xff0c;…

SQL的执行与优化

文章目录 MySQL查询原理与优化一、select语句的执行顺序二、join 的执行与优化1、驱动表 & 被驱动表2、Simple Nested Loop Join3、Index Nested Loop Join4、Block Nested Loop Join5、Hash Join6、join 优化小结 三、on 与 where 对比四、group by 的执行与优化1、group …

拜占庭将军问题相关问题

1、拜占庭将军问题基本描述 问题 当我们讨论区块链共识时&#xff0c;为什么会讨论拜占庭将军问题&#xff1f; 区块链网络的本质是一个分布式系统&#xff0c;在存在恶意节点的情况下&#xff0c;希望 整个系统当中的善良节点能够对于重要的信息达成一致&#xff0c;这个机…

设计模式 --3:装扮模式

结构图 代码 #include<iostream>using namespace std;class person { public:person() {};person(string name) { this->name name; }virtual void show() {cout << "装扮的:" << this->name << endl;} private:string name; }; //装…

C语言中,基本数据类型介绍

C语言当中各种数据类型的大小&#xff0c;首先要了解有哪些数据类型。 一 字符型&#xff1a; 整数&#xff08;字符&#xff09;类型存储大小值范围char1 字节-128 到 127 或 0 到 255&#xff08;2的8次方&#xff09;unsigned char1 字节0 到 255&#xff08;&#xff09;s…

搭建个人智能家居 3 -第一个设备“点灯”

搭建个人智能家居 3 -第一个外设“点灯” 前言ESPHome点灯 HomeAssistant 前言 前面我们已经完成了搭建这个智能家居所需要的环境HomeAssistant和ESPHome&#xff0c;今天我们开始在这个智能家居中添加我们的第一个设备&#xff08;一颗LED灯&#xff09;&#xff0c;如果环境…

vim | 介绍vim以及配置vimrc文件

好像熟练使用vim 是玩linux 必修课 当然&#xff0c;初代玩家能在vim 完成编辑 并保存已是入门了&#xff0c;想当初在大学的时候&#xff0c;死活转不过来&#xff0c;玩不过来&#xff0c;甚至有些恐惧 但后来&#xff0c;弄清楚原理&#xff0c;反倒觉得简简单单已是完美了。…

HSE化工应急安全生产管理平台:衢州某巨大型化工企业的成功应用

在化工行业中&#xff0c;安全生产一直是至关重要的议题。为了提高生产安全性、降低成本并提升企业形象&#xff0c;衢州某巨大型化工企业引入了HSE化工应急安全生产管理平台&#xff0c;取得了显著的改善和获益。 该平台的核心功能包括风险管理和应急预案制定。通过对化工生产…

HJ212协议C#代码解析实现

HJ212协议C#代码解析实现 HJ212协议是环保中一个非常重要的标准协议&#xff08;字符串协议&#xff09;&#xff0c;之前写了两篇C HJ212协议解析的相关博文&#xff1a; 环保 HJ212协议解析基于Qt5.14.2的HJ212 TCP服务端接收解析入库程序 最近在学习C#&#xff0c;所以打算…

【原创】java+swing+mysql二手车交易管理系统

前言&#xff1a; 本文主要介绍了二手车交易管理设计与实现。首先&#xff0c;通过市场需求&#xff0c;我们确定了二手车的功能&#xff0c;通常的二手车交易系统都是B/S架构&#xff0c;然而我们今天要用javaswing去开发一个C/S架构的二手车交易管理系统&#xff0c;主要功能…

面试经典-33-反转链表 II

题目 给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输出&#xff1a…

【运维】PVE 自带监控显示问题处理

目录 问题描述 问题处理 问题描述 CPU和服务器负载显示为1970-01-01&#xff0c;无法正确显示当前监控 问题处理 使用如下命令 rm /var/lib/rrdcached/db/* -rf刷新网页显示如下