1 效果图：
2 环境：
======
2.1 谷歌浏览器：
强调这一点，是因为css设置中，并没有对浏览器兼容问题进行代码设置，主要是突出重点。
2.2 微软编辑器vscode：
用于代码编写。
3 知识点：
===代码注释中有说明===
3.1 html基础知识。
3.2 css基础知识。
3.3 vue基础知识。
===开始===
4 html基础框架：
<!DOCTYPE html>
<html>
<head>
<!-- 网页名称设置 -->
<title>vue-note</title>
<!-- 形式 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- 本地外部导入css文件 -->
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<!-- 网面布局的设置 -->
<section id="todoapp">
<!--内容1：输入框 -->
<header class="header">
......
</header>
<!--内容2：列表区域 -->
<section class="main">
......
</section>
<!-- 内容3：统计和清空 -->
<footer class="footer" v-show="this.list.length!=0">
......
</footer>
</section>
<!-- 引入在线的开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--内部js设置，这是vue的特色 -->
<script>
// 内部vue的js代码
</script>
</body>
</html>5 两个文件：
6 vue-note.html代码：
<!DOCTYPE html>
<html>
<head>
<!-- 网页名称设置 -->
<title>vue-note</title>
<!-- 形式-->
<!--meta http-equiv="content-type" content="text/html; charset=UTF-8" /-->
<!-- 可以简写：形式二 -->
<meta charset="UTF-8">
<!-- 本地外部导入css文件 -->
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<!-- 网面布局的设置 -->
<section id="todoapp">
<!-- 头部定义 -->
<header class="header">
<!--正文body的文字h1～h6标题复习-->
<h1>vue note txt</h1>
<!-- 输入框 -->
<!-- 功能函数：pushInfo的调用，后面需要定义其功能，这与python不一样-->
<input placeholder="请输入内容"class="new-todo" v-model="inputInfo" @keyup.enter="pushInfo"/>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list" >
<li class="todo" v-for="(item,index) in list">
<div class="view">
<span class="index">{{index+1}}.</span> <label>{{item}}</label>
<!-- 功能函数：spliceInfo(index)的调用，后面需要定义其功能，这与python不一样-->
<button class="destroy" @click="spliceInfo(index)"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<!--注意与区别：v-if 呢如果条件为false，那么在生成的HTML语句中，条件为false的标签不会生成在代码中-->
<!-- v-show是条件为不等于0时，即true显示和输出，否则false那就不输出和显示 -->
<footer class="footer" v-show="this.list.length!=0">
<span class="todo-count"> <strong>{{this.list.length}}</strong> items left </span>
<!-- 功能函数：clearInfo的调用，后面需要定义其功能，这与python不一样-->
<button class="clear-completed" @click="clearInfo"> Clear</button>
</footer>
</section>
<!-- 引入在线的开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--内部js设置，这是vue的特色 -->
<script>
var app = new Vue({
el:"#todoapp",
data:{
// 初始化列表
list:["python","html","vue"],
// 初始化输入框信息
inputInfo:"Todo事项"
},
// 方法
methods:{
//下面的功能函数命名是驼峰命名法
// pushInfo函数定义
pushInfo:function(){
this.list.push(this.inputInfo)
},
//spliceInfo函数定义，注意该函数内有index
spliceInfo:function(index){
//splice(index,len,[item])对列表进行删除或者修改
//本地[item]没设置，那么就是删除，否则就是替换
this.list.splice(index,1)
},
// clearInfo函数定义
clearInfo:function(){
this.list=[]
}
}
})
</script>
</body>
</html>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步：<section id="todoapp">的设置，也是重点----*/
#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函数定义等。
==自己整理并分享出来===
喜欢的人，请点赞、关注、评论、转发和收藏。