vuecss制作todo事项（待办事项）的代码解析

　　1效果图：
　　2环境：
　　2。1谷歌浏览器：
　　强调这一点，是因为css设置中，并没有对浏览器兼容问题进行代码设置，主要是突出重点。
　　2。2微软编辑器vscode：
　　用于代码编写。
　　3知识点：
　　代码注释中有说明
　　3。1html基础知识。
　　3。2css基础知识。
　　3。3vue基础知识。
　　开始
　　4html基础框架：！DOCTYPEhtmlhtmlhead！网页名称设置titlevuenotetitle！形式metahttpequivcontenttypecontenttexthtml；charsetUTF8！本地外部导入css文件linkrelstylesheettypetextcsshrefindex。cssheadbody！网面布局的设置sectionidtodoapp！内容1：输入框headerclassheader。。。。。。header！内容2：列表区域sectionclassmain。。。。。。section！内容3：统计和清空footerclassfootervshowthis。list。length！0。。。。。。footersection！引入在线的开发环境版本，包含了有帮助的命令行警告！内部js设置，这是vue的特色bodyhtml
　　5两个文件：
　　6vuenote。html代码：！DOCTYPEhtmlhtmlhead！网页名称设置titlevuenotetitle！形式！metahttpequivcontenttypecontenttexthtml；charsetUTF8！可以简写：形式二metacharsetUTF8！本地外部导入css文件linkrelstylesheettypetextcsshrefindex。cssheadbody！网面布局的设置sectionidtodoapp！头部定义headerclassheader！正文body的文字h1～h6标题复习h1vuenotetxth1！输入框！功能函数：pushInfo的调用，后面需要定义其功能，这与python不一样inputplaceholder请输入内容classnewtodovmodelinputInfokeyup。enterpushInfoheader！列表区域sectionclassmainulclasstodolistliclasstodovfor（item，index）inlistspanclassindex｛｛index1｝｝。spanlabel｛｛item｝｝label！功能函数：spliceInfo（index）的调用，后面需要定义其功能，这与python不一样buttonclassdestroyclickspliceInfo（index）buttonliulsection！统计和清空！注意与区别：vif呢如果条件为false，那么在生成的HTML语句中，条件为false的标签不会生成在代码中！vshow是条件为不等于0时，即true显示和输出，否则false那就不输出和显示footerclassfootervshowthis。list。length！0spanclasstodocountstrong｛｛this。list。length｝｝strongitemsleftspan！功能函数：clearInfo的调用，后面需要定义其功能，这与python不一样buttonclassclearcompletedclickclearInfoClearbuttonfootersection！引入在线的开发环境版本，包含了有帮助的命令行警告！内部js设置，这是vue的特色bodyhtml
　　7index。css代码：第1步：整体设置这是设置默认的内外边距。因为浏览器标签自带的属性是不统一的，设置为0，为了兼容所有的浏览器。html，body｛margin：0；padding：0；｝body｛字体大小和样式font：14pxArial；lineheight：1。4em；网页整体的背景颜色background：0695ce；字体的颜色，注意h1的标题字体颜色是单独设置的color：4d4d4d；body大小设置，其实就是表格todo框的大小minwidth：230px；maxwidth：550px；margin：0auto；｝按钮设置：包括按钮和clear按钮设置button｛margin：0；padding：0；border：0；background：none；fontsize：100；verticalalign：baseline；fontfamily：inherit；fontweight：inherit；color：inherit；webkitappearance：none；appearance：none；｝第2步：sectionidtodoapp的设置，也是重点todoapp｛todoapp的box的背景颜色background：fff；margin：180px040px0；position：relative；boxshadow：02px4px0rgba（0，0，0，0。2），025px50px0rgba（0，0，0，0。1）；｝第21步：头部分的文字标题名的设置todoapph1｛position：absolute；top：160px；width：100；fontsize：60px；fontweight：100；textalign：center；文字颜色设置color：rgba（175，47，47，。8）；｝第22步：第一行输入框的设置输入框的placeholder文本设置todoappinput：：inputplaceholder｛fontstyle：italic；fontweight：300；color：gray；｝输入框的边界框线设置：focus｛outline：0；｝第一行输入框设置，尤其是处于编辑状态下的。newtodo，。edit｛position：relative；margin：0；width：100；fontsize：24px；fontfamily：inherit；fontweight：inherit；lineheight：1。4em；border：0；color：inherit；padding：6px；border：1pxsolid999；boxshadow：inset01px5px0rgba（0，0，0，0。2）；boxsizing：borderbox；｝第一行输入框的新的输入信息设置。newtodo｛padding：16px；border：none；background：rgba（0，0，0，0。003）；boxshadow：inset02px1pxrgba（0，0，0，0。03）；｝第23步：列表区域的设置。main｛position：relative；zindex：2；bordertop：1pxsolide6e6e6；｝。todolist｛margin：0；padding：0；liststyle：none；maxheight：420px；overflow：auto；｝。todolistli｛position：relative；fontsize：24px；borderbottom：1pxsolidededed；height：60px；boxsizing：borderbox；｝。todolist。view。index｛position：absolute；color：gray；left：10px；top：20px；fontsize：16px；｝。todolistlilabel｛wordbreak：breakall；padding：15px15px15px60px；display：block；lineheight：1。2；transition：color0。4s；｝。todolistli。completedlabel｛color：d9d9d9；textdecoration：linethrough；｝。todolistli。destroy｛display：none；position：absolute；top：0；right：10px；bottom：0；width：40px；height：40px；margin：auto0；fontsize：30px；叉的飘过所在行的颜色color：chartreuse；marginbottom：11px；transition：color0。2seaseout；｝。todolistli。destroy：hover｛叉的选中颜色color：f12113；｝。todolistli。destroy：after｛叉的符号content：；｝列表的每一行右边的，当鼠标划过时的可变设置。todolistli：hover。destroy｛display：block；｝。todolistli。edit｛display：none；｝。todolistli。editing：lastchild｛marginbottom：1px；｝第24步：注脚区域的设置。footer｛color：777；padding：10px15px；height：20px；textalign：center；bordertop：1pxsolide6e6e6；｝。footer：before｛content：；position：absolute；right：0；bottom：0；left：0；height：50px；overflow：hidden；boxshadow：01px1pxrgba（0，0，0，0。2），08px03pxf6f6f6，09px1px3pxrgba（0，0，0，0。2），016px06pxf6f6f6，017px2px6pxrgba（0，0，0，0。2）；｝注脚在左下的设置。todocount｛float：left；textalign：left；｝。todocountstrong｛fontweight：300；｝。clearcompleted，html。clearcompleted：active｛float：right；position：relative；lineheight：20px；textdecoration：none；cursor：pointer；｝clear的下划线设置。clearcompleted：hover｛textdecoration：underline；｝
　　8主要是熟悉vue的单文件结构布局，指令：vshow和vif区别，vfor复习；vue函数定义等。
　　自己整理并分享出来
　　喜欢的人，请点赞、关注、评论、转发和收藏。