写在前面
学过了前面11个章节的知识，可以说你已经对vue2.0的基础知识有了一定程度的掌握，虽然在真正开发过程中，一些知识的使用会稍有不同，但是别慌，我们会把那部分内容在进阶系列，比如：单文件组件，过渡效果，状态管理vuex，路由vue-router，网络请求vue-resource等等。
那是不是就意味着我们现在还不能用基础知识做开发，当然不是，加强动手能力是进步的最好方式，我们今天就来用学过的基础知识，来动手做一个demo：todoList案例，以此来巩固一下学过的知识，并且练练手。
看一个todo案例的效果图，然后我们来模仿它做一个：点击查看在线案例
（gif图，加载需要一丢丢时间）
本来是打算录制成视频，但是demo相对容易，通过图文并茂的形式也能让大家很好的接收，倘若后期有需要视频的反馈，我再尝试录制成视频的形式。
如果你还没看完前面的11个章节，建议你先学习，否则欲速则不达。
磨刀不误砍柴工，在动手之前，我们理一下思绪该如何实现：
- 利用vue的mvvm的特性，绑定用户输入的内容和展示在列表的内容。
- 用户勾选表示已完成，通过动态修改样式来标识已完成。
- 用户点击按钮“delete”，通过v-show来控制任务隐藏。
通过这个思路，我们就可以把之前11个章节的部分内容串联起来，运用到这个案例中。
来吧，开始准备我们需要的工具：
- chrome浏览器，或者一个支持ES5的Object.defineProperty特性的浏览器即可。
- webstorm2017，我选用它的原因是因为webstorm2017增加对vue的完美支持，当然，如果你的电脑跑不起，或者不习惯，你也可以使用你喜欢的IDE。
安装vue.js
这里我用第二节的简易安装方式，并且是直接下载vue.js文件到本地，非cdn资源文件。
先看看目录结构，十分简单：一个todo.html，一个本地的vue2.0.js。
（非常简单）
在head中，载入vue.2.0.js文件。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>任务列表</title>
<!--载入vue.2.0.js文件-->
<script src="js/vue2.0.js"></script>
</head>
成功载入之后，我们就可以来编写代码了。
创建vue实例
利用第三节的知识，创建一个vue实例，超简单！
<div id="app"></div>
<script>
const app = new Vue({
el:"#app"
});
</script>
顺利地创建了一个vue的实例app！
数据绑定
接下来，我们就实现思路的第一步：数据绑定。
在绑定之前，我们来设计关于任务的数据结构，一个任务包括：任务内容，是否完成，是否删除。
因此，我们可以得到一个完成的任务数据结构：
{
content:"任务内容",
finished:false,//是否完成
deleted:false//是否删除
}
那么，我们给实例的data添加代码：
const app = new Vue({
el:"#app",
data:{
//默认
task:{
content:'',//内容为空
finished:false,//未完成
deleted:false//未删除
}
}
});
默认初始化任务task的内容content为空，finished状态为false表示未完成，deleted状态为false表示未删除。
任务task的数据结构有了，我们就把它和页面的用户输入关联起来，还记得使用哪个指令吗？（花5秒钟时间回忆一下）
接着，我们就来写html代码：
<div id="app"> <input type="text" v-model="task.content" placeholder="编写任务"> </div>
通过v-model指令，就可以成功地绑定task的content，用户在输入的同时，实例app的data也会实时地更新自身的数据。
我们通过控制台检验一下是否成功地绑定了：
（gif效果图，加载需要一丢丢时间）
虽然成功地绑定了task的content，但是我们的input没有添加样式，缺少美感，我们来给它添加class类“edit”和相关的样式。
.edit{
display:block ;
width:80%;
height: 35px;
line-height: 35px;
margin: 30px auto;
box-sizing: border-box;
padding-left: 4px;
border-radius: 4px;
border:1px solid #ccc;
outline: 0;
box-shadow: 0 0 5px #ccc;
}
给input控件添加以上的css样式，它的外观就变成我们想要的效果：
用户不停地输入多个任务，我们要用一个数组list[ ]来存储用户输入的每一个任务task。
按键修饰符
假设：用户输入任务内容后，按下enter键表示完成输入。所以，我们要实现监听键盘事件。
这里我们会用到vue提供给我们的按键修饰符：
在监听键盘事件时，我们经常需要监测常见的键值。Vue允许为 v-on 在监听键盘事件时添加按键修饰符。
所以，我们给input控件添加键盘事件keydown的监听，最终代码如下：
<input @keydown.enter="addTask" class="edit" type="text" v-model="task.content" placeholder="编写任务">
我们增加了@keydown.enter表示监听键盘中的enter键的按下事件，而addTask则是实例app中的methods方法，所以，我们也会给实例增加methods。如下：
const app = new Vue({
el:"#app",
data:{
//默认
task:{
content:'',//内容为空
finished:false,//未完成
deleted:false//未删除
}
},
methods:{
//添加任务
addTask:function(){
//.....
}
}
});
接下来，我们就来编写addTask( )方法，实现将用户输入的内容存储起来，因为我们在之前就通过 v-model 将用户输入的内容和task中的content关联起来，所以我们只需要把task.content存储起来就可以了，存在哪里呢？我们用一个数组list[ ]来存储它们。如下：
const app = new Vue({
el:"#app",
data:{
//默认
task:{
content:'',//内容为空
finished:false,//未完成
deleted:false//未删除
},
//任务列表
list:[]
},
methods:{
//添加任务
addTask:function(){
//将task存入list数组
this.list.push(this.task);
//存入list[]后，重置task
this.task = {
content:'',//内容为空
finished:false,//未完成
deleted:false//未删除
}
}
}
});
上面的代码，我们给data增加了list，并且通过push方法，成功地把每个任务存放在list数组中。
任务列表list数组既然有了，我们就可以通关 v-for 循环，把它遍历并展示出来了。那我们就来编写列表的html代码，如下：
<div class="list">
<div class="unit" v-for="(item,index) in list">
<input type="checkbox">
<span>{{item.content}}</span>
</div>
</div>
有html还不够，加上css样式：
.list{
margin: 0 auto;
width:80%;
}
.unit{
position: relative;
padding: 10px 0;
border-bottom: 1px solid #efefef;
}
.unit:last-child{
border-bottom: 0;
}
样式也加上了，我们来看看通过按下键盘enter键添加的任务，能否成功地展示在任务列表上，演示一下：
(gif效果图，加载需要一丢丢时间)
我们输入任务，并按下回车键，任务内容成功地添加到了list[ ]数组，并通过 v-for 遍历到页面上，十分顺利。
动态修改样式
但我们的工作还没结束，案例中，当勾选框被选中的时候，表示任务已完成，切换相应的样式，未选中的时候，表示任务未完成，也会切换样式。
接下来，我们就来实现这一步，我们用到了第十一节的动态class绑定的知识。
首先，我们先为每个checkbox绑定点击事件，并且动态渲染是否选中，稍微修改上面的代码：
<input @click="changeState(index)" :checked="item.finished" type="checkbox">
点击checkbox，我们通过编写一个changeState( )方法来实现切换该任务的状态，所以我们来编写一下changeState( )方法：
//点击修改任务状态
changeState:function(index){
let curState = this.list[index].finished;
this.list[index].finished = !curState;
}
就这样，我们就顺利地实现了点击checkbox来修改每个任务task对应的状态finished（切换true或者false）。
既然修改了状态，我们就要在页面上看到相应的效果，我们通过动态的修改class来实现。
我们把这行代码：
<span>{{item.content}}</span>
修改成：
<span :class="{'finish':item.finished}">
{{item.content}}
</span>
学习过第十一节我们知道，当改任务的finished为true的时候，就会添加样式 class='finish' ；否则则不会。
所以，少不了finish的样式类代码：
.finish{
text-decoration: line-through;
color: #ccc;
}
好了，所有代码都准备好了，演示一下效果：
（gif效果图，加载需要一丢丢时间）
切换是否成功状态也成功了实现了。
删除任务
还差最后一步，我们来实现删除任务，当我们编写错误的任务的时候，就可以点击删除按钮来删掉它。
我们先为每个任务添加删除按钮，并添加点击事件：
<div class="unit" v-for="(item,index) in list">
<!--
自行省略
-->
<button @click="removeTask(index)" class="del">删除</button>
</div>
同样，少不了.del类的样式：
.del{
background: red;
text-decoration: none;
position: absolute;
right:0;
font-size: 12px;
border: 0;
outline: 0;
padding: 2px 5px;
border-radius: 5px;
color: #fff;
}
点击事件我们绑定的是removeTask方法名，那么我们就来编写一个removeTask( )方法：
removeTask:function(index){
//使用splice操作删除数组指定项
this.list.splice(index,1);
}
每个任务都添加了删除按钮，并绑定了相应的处理程序，那么我们就来看看效果，是否可以删除指定的任务：
(gif效果图，加载需要一丢丢时间)
删除任务的功能也顺利实现了。
为了稍做完善，当我们没有任何任务展示的时候，我们会在页面上显示“暂无任务”的文字提示。这样的提示对用户体验来说会比较友好一点。
我们增加html代码，如下：
<p class="empty">暂无任务</p>
css样式，如下：
.empty{
font-size: 13px;
color: #ccc;
text-align: center;
padding: 10px 0;
}
那么，我们如何控制这个提示是否渲染呢？这里就用到了我们学过的 v-if 条件渲染指令，当我们的list[ ]数组的长度为0的时候，表示无任务，可展示“暂无任务”，反之则不渲染。
那好，我们就用v-if指令来稍做修改html代码：
<p v-if="list.length === 0" class="empty"> 暂无任务 </p>
我们在之前的章节说过，绑定数据的时候，可以使用简单的javascript表达式，上面的案例，我们就使用了简单的全等判断，你也可以使用计算属性computed来实现，留给大家自己动手去实现。
好了，我们继续来看效果：
(gif效果图，加载需要一丢丢时间)
写到这里，我们就完成了整个demo案例。你动手了吗？
本节小结
通过这个demo的制作，我们能复习很多之前讲到的基础知识，为接下来的Vue2.0进阶打下基础。
本系列教程来自 web前端教程 微信公众号。
转载请注明：Rockyxia Web技术博客 » Vue实战案例：用学过的知识做一个小demo
感谢阅读，如果您发现文章中有表述不准确，欢迎提出来，也欢迎交流相关问题，你可以去这里进行一对一问答交流。