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

　　1 效果图：
　　2 环境：
　　======
　　2.1 谷歌浏览器：
　　强调这一点，是因为css设置中，并没有对浏览器兼容问题进行代码设置，主要是突出重点。
　　2.2 微软编辑器vscode：
　　用于代码编写。
　　3 知识点：
　　===代码注释中有说明===
　　3.1 html基础知识。
　　3.2 css基础知识。
　　3.3 vue基础知识。
　　===开始===
　　4 html基础框架：                                                   
              
        ......       
               
        ......       
                    
                	       
　　5 两个文件：
　　6 vue-note.html代码：                                                             
              
                  
vue note txt
                                  
               
         
           
                            {{index+1}}. {{item}}                                                      
         
       
                                  
                	       
　　7 index.css代码：/*----第1步：整体设置----*/ /*这是设置默认的内外边距。因为浏览器标签自带的属性是不统一的，设置为0，为了兼容所有的浏览器。*/ html, body {   margin: 0;   padding: 0; }  body {   /*字体大小和样式*/   font: 14px Arial;   line-height: 1.4em;   /*网页整体的背景颜色*/   background: #0695ce;   /*字体的颜色，注意h1的标题字体颜色是单独设置的*/   /*color: #4d4d4d;*/   /*body大小设置，其实就是表格todo框的大小*/   min-width: 230px;   max-width: 550px;   margin: 0 auto; }  /*按钮设置：包括×按钮和clear按钮设置*/ button {   margin: 0;   padding: 0;   border: 0;   background: none;   font-size: 100%;   vertical-align: baseline;   font-family: inherit;   font-weight: inherit;   color: inherit;   -webkit-appearance: none;   appearance: none; }  /*----第2步：
的设置，也是重点----*/ #todoapp {   /*todoapp的box的背景颜色*/   background: #fff;   margin: 180px 0 40px 0;   position: relative;   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); } /*---第2-1步：头部分的文字标题名的设置*/ #todoapp h1 {   position: absolute;   top: -160px;   width: 100%;   font-size: 60px;   font-weight: 100;   text-align: center;   /*文字颜色设置*/   color: rgba(175, 47, 47, .8); }  /*----第2-2步：第一行输入框的设置---*/ /*输入框的placeholder文本设置*/ #todoapp input::input-placeholder {   font-style: italic;   font-weight: 300;   color: gray; } /*输入框的边界框线设置*/ :focus {   outline: 0; } /*第一行输入框设置，尤其是处于编辑状态下的*/ .new-todo, .edit {   position: relative;   margin: 0;   width: 100%;   font-size: 24px;   font-family: inherit;   font-weight: inherit;   line-height: 1.4em;   border: 0;   color: inherit;   padding: 6px;   border: 1px solid #999;   box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);   box-sizing: border-box; }  /*第一行输入框的新的输入信息设置*/ .new-todo {   padding: 16px;   border: none;   background: rgba(0, 0, 0, 0.003);   box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03); }  /*----第2-3步：列表区域的设置---*/ .main {   position: relative;   z-index: 2;   border-top: 1px solid #e6e6e6; }  .todo-list {   margin: 0;   padding: 0;   list-style: none;   max-height: 420px;   overflow: auto; }  .todo-list li {   position: relative;   font-size: 24px;   border-bottom: 1px solid #ededed;   height: 60px;   box-sizing: border-box; }  .todo-list .view .index {   position: absolute;   color: gray;   left: 10px;   top: 20px;   font-size: 16px; }  .todo-list li label {   word-break: break-all;   padding: 15px 15px 15px 60px;   display: block;   line-height: 1.2;   transition: color 0.4s; }  .todo-list li.completed label {   color: #d9d9d9;   text-decoration: line-through; }  .todo-list li .destroy {   display: none;   position: absolute;   top: 0;   right: 10px;   bottom: 0;   width: 40px;   height: 40px;   margin: auto 0;   font-size: 30px;   /*×→叉的飘过所在行的颜色*/   color: chartreuse;   margin-bottom: 11px;   transition: color 0.2s ease-out; }  .todo-list li .destroy:hover {   /*×→叉的选中颜色*/   color: #f12113; }  .todo-list li .destroy:after {   /*×→叉的符号*/   content: ＂×＂; }  /*列表的每一行右边的×，当鼠标划过时的可变设置*/ .todo-list li:hover .destroy {   display: block; } .todo-list li .edit {   display: none; } .todo-list li.editing:last-child {   margin-bottom: -1px; }  /*----第2-4步：注脚区域的设置---*/ .footer {   color: #777;   padding: 10px 15px;   height: 20px;   text-align: center;   border-top: 1px solid #e6e6e6; }  .footer:before {   content: ＂＂;   position: absolute;   right: 0;   bottom: 0;   left: 0;   height: 50px;   overflow: hidden;   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,     0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,     0 17px 2px -6px rgba(0, 0, 0, 0.2); } /*注脚在左下的设置*/ .todo-count {   float: left;   text-align: left; }  .todo-count strong {   font-weight: 300; }  .clear-completed, html .clear-completed:active {   float: right;   position: relative;   line-height: 20px;   text-decoration: none;   cursor: pointer; }  /*clear的下划线设置*/ .clear-completed:hover {   text-decoration: underline; }
　　8 主要是熟悉vue的单文件结构布局，指令：v-show和v-if区别，v-for复习；vue函数定义等。
　　==自己整理并分享出来===
　　喜欢的人，请点赞、关注、评论、转发和收藏。