案例:实现TodoLis(尚硅谷)

是做完后再记录的,前端我主要是要了解下,所以这里记录的比较浅
由于是做完后记录,所以你cv后的代码的效果并不一定和我展示的效果图一样

静态页面

先来实现静态页面,再考虑动态页面
在这里插入图片描述
组件拆分
在这里插入图片描述
说明(实际的组件名不是和下面一样的):

  1. Search组件就是上面的那个搜索框
  2. List组件就是列表
  3. ListItem组件:组件的每一项
  4. Buttom组件:就是底下的哪些东西
    抽象一下
    在这里插入图片描述

接下来是实现逻辑
app.vue

<template><div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader/><MyList/><MyFooter/></div></div></div></template><script>import MyHeader from './components/MyHeader'import MyList from './components/MyList'import MyFooter from './components/MyFooter.vue'export default {name:'App',components:{MyHeader,MyList,MyFooter},}
</script><style>/*base*/body {background: #fff;}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;}.btn-danger:hover {color: #fff;background-color: #bd362f;}.btn:focus {outline: none;}.todo-container {width: 600px;margin: 0 auto;}.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
</style> 

MyHeader.vue

<template><div class="todo-header"><input type="text" placeholder="请输入你的任务名称,按回车键确认"/></div>
</template><style>/*header*/.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;}.todo-header input:focus {outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}
</style>    

MyList.vue

<template><ul class="todo-main"><!--当时我写到这里的时候想用v-for去遍历数据,这样我就不用写<MyItem/>了--><MyItem/></ul>
</template><style>/*list*/.todo-main {margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;}.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;} 
</style>    

MyItem.vue

<template><li><label><input type="checkbox"/><span>xxxxx</span></label><button class="btn btn-danger" style="display:none">删除</button></li>
</template><style>/*item*/li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}   
</style>  

静态页面完成,明天继续

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

手写Mybatis:第15章-返回Insert操作自增索引值

文章目录 一、目标&#xff1a;Insert自增索引值二、设计&#xff1a;Insert自增索引值三、实现&#xff1a;Insert自增索引值3.1 工程结构3.2 Insert自增索引值类图3.3 修改执行器3.3.1 修改执行器接口3.3.2 抽象执行器基类 3.4 键值生成器3.4.1 键值生成器接口3.4.2 不用键值…

RK3399平台开发系列讲解(内核调试篇)spidev_test工具使用

🚀返回专栏总目录 文章目录 一、环境二、执行测试三、回环测试四、字节发送测试五、32位数据发送测试沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 在 Linux 系统上,“spidev_test” 是一个用于测试和配置 SPI(Serial Peripheral Interface)设备的命令行工具。…

[管理与领导-85]:IT基层管理者 - 核心技能 - 高效执行力 - 10 - 高效执行力的9个段位

目录 前言&#xff1a; 一段&#xff1a;准确执行&#xff0c;快速反应&#xff0c;坚决执行 &#xff08;态度很重要&#xff09; 二段&#xff1a;结果导向 苦劳过后&#xff0c;有功劳&#xff08;有结果很重要&#xff09; 三段&#xff1a;有始有终 主动反馈、有始有终…

图像文件的操作MATLAB基础函数使用

简介 MATLAB中的图像处理工具箱体统了一套全方位的标准算法和图形工具&#xff0c;用于进行图像处理、分析、可视化和算法开发。这里仅仅对常用的基础函数做个使用介绍。 查询图像文件的信息 使用如下函数 imfinfo(filename,fmt) 函数imfinfo返回一个结构体的info&#xff…

rsa加密解密java和C#互通

前言 因为第三方项目是java的案例&#xff0c;但是原来的项目使用的是java&#xff0c;故需要将java代码转化为C#代码&#xff0c;其中核心代码就是RSA加密以及加签和验签&#xff0c;其他的都是api接口请求难度不大。 遇到的问题 java和c#密钥格式不一致&#xff0c;java使…

Python 图形化界面基础篇:什么是 Tkinter 以及为什么选择它

Python 图形化界面基础篇&#xff1a;什么是 Tkinter 以及为什么选择它 引言第一部分&#xff1a;什么是 Tkinter&#xff1f; 1. 跨平台性2. Python 标准库的一部分3. 易学易用4. 社区和资源 第二部分&#xff1a;为什么选择 Tkinter&#xff1f; 1. 简单易用2. 跨平台兼容性3…

人工智能AI 全栈体系(一)

第一章 神经网络是如何实现的 这些年人工智能蓬勃发展&#xff0c;在语音识别、图像识别、自然语言处理等多个领域得到了很好的应用。推动这波人工智能浪潮的无疑是深度学习。所谓的深度学习实际上就是多层神经网络&#xff0c;至少到目前为止&#xff0c;深度学习基本上是用神…

华为Mate60 Pro手机重大突破,资本要做空iPhone?Android开发市场将来会如何?

在9月10日有消息称&#xff0c;在华为的Mate60 Pro手机取得重大突破&#xff0c;其研发的 麒麟9000s芯片的研制&#xff0c; 国际卫星通信技术的应用 等这一系列的重大突破&#xff0c;导致美国的一家对冲基金Satori Fund创始人公开要做空iPhone。 而摩根大通发布报告称&#x…

十二、集合(5)

本章概要 for-in 和迭代器 适配器方法惯用法 本章小结 简单集合分类 for-in和迭代器 到目前为止&#xff0c;for-in 语法主要用于数组&#xff0c;但它也适用于任何 Collection 对象。实际上在使用 ArrayList 时&#xff0c;已经看到了一些使用它的示例&#xff0c;下面是它…

el-form表单中不同数据类型对应的时间格式化和校验规则

1. 在表单中, 当选择不同的数据类型时, 需要在下面选择时间时和数据类型对应上, 通过监听数据类型的变化, 给时间做格式化, 2. 但是当不按顺序选择数据类型后, 再选时间可能会报错, 所以需要在dom更新后, 再清空表单. 3. 校验规则, 结束时间需要大于开始时间, 但是不能选当前的…

Nacos——Distro一致性协议

Nacos——Distro一致性协议 1. 理论 一致性一直都是分布式系统中绕不开的话题。根据CAP中&#xff0c;要么CP(保证强一致性牺牲可用性)&#xff0c;要么AP(最终一致性来保证可用性)&#xff0c;在市面上也有几种一致性算法&#xff0c;像Paxos&#xff0c;Raft&#xff0c;Zoo…

改变Next.js默认端口的方法

Next.js的默认访问端口是3000。有时环境需要更改。 方法1 通过环境变量 此方法不能改变端口&#xff0c;看方法2 点击查看官方文档 Next.js will automatically expand variables that use $ to reference other variables e.g. $VARIABLE inside of your .env* files. This …

探讨使用API的优点及其在企业级应用中的作用

通过使用API&#xff0c;开发者可以快速、高效地构建功能丰富、用户体验良好的应用程序&#xff0c;而无需从头开始收集和处理所有数据。同时&#xff0c;API也可以帮助企业和机构提高效率、创造新的商业模式和创新服务。本文将探讨使用API的优点及其在企业级应用中的作用。 一…

排序算法:快速排序(三种排序方式、递归和非递归)

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关排序算法的相关知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通…

GeoNet: Unsupervised Learning of Dense Depth, Optical Flow and Camera Pose 论文阅读

论文信息 题目&#xff1a;GeoNet: Unsupervised Learning of Dense Depth, Optical Flow and Camera Pose 作者&#xff1a;Zhichao Yin and Jianping Shi 来源&#xff1a;CVPR 时间&#xff1a;2018 Abstract 我们提出了 GeoNet&#xff0c;这是一种联合无监督学习框架&a…

软件管理 - yum - rpm -本地yum源 - 局域网远程yum源 - 阿里云镜像 - 克隆阿里云镜像源

软件管理 - yum - rpm -本地yum源 - 局域网远程yum源 - 阿里云镜像 - 克隆阿里云镜像源 更换阿里开源镜像网站&#xff0c;手把手教你怎么换&#xff0c;再也不需要求人了 创建本机yum源 rpm -> centos 的安装包后缀 rpm软件包名称: 软件名称 版本号(主版本、次版本、修订号…

js对象转json文件

目录 需求1.首先寻找类似需求的数据2.对数据进行转换3.将转换后的数据转为json文件4.完整代码 需求 需求&#xff1a;在做项目时&#xff0c;遇到了需要制作地址列表的功能&#xff0c;这一般都会用到一些开源的组件库&#xff0c;但是有个问题是不同组件库之间的城市列表数据结…

【vue】vue项目中批量下载文件并打压缩包

前言 一开始用的是循环单个文件下载&#xff0c;即从后台获取到文件url列表&#xff0c;循环对每个url单独进行下载&#xff0c;这样的问题是每调用一次下载&#xff0c;浏览器都会进行“另存为”的弹框&#xff0c;很麻烦&#xff01;&#xff01;&#xff01; 关闭“下载前…

vim常用操作

一、Esc键 & 命令模式 1.撤销&#xff1a;u 恢复撤销&#xff1a;Ctrl r 2.定位 行首&#xff1a;0 行尾&#xff1a;$ 第7行&#xff1a;7G 3.编辑 下行开始插入&#xff1a; o 删除行&#xff1a;dd 复制3行并粘贴&#xff1a;3yy ---> p 复制单词并粘贴&#…

【洛谷 P1115】最大子段和 题解(贪心算法)

最大子段和 题目描述 给出一个长度为 n n n 的序列 a a a&#xff0c;选出其中连续且非空的一段使得这段和最大。 输入格式 第一行是一个整数&#xff0c;表示序列的长度 n n n。 第二行有 n n n 个整数&#xff0c;第 i i i 个整数表示序列的第 i i i 个数字 a i …