本文通过vue2.0基础知识，逐步构建一个todoList案例，涵盖数据绑定、动态样式、事件监听等，巩固学习成果，提升动手能力。文章详细介绍了每个功能的实现步骤，包括任务添加、状态切换和删除操作，适合初学者实践。
学过了前面11个章节的知识，可以说你已经对vue2.0的基础知识有了一定程度的掌握，虽然在真正开发过程中，一些知识的使用会稍有不同，但是别慌，我们会把那部分内容在进阶系列，比如：单文件组件，过渡效果，状态管理vuex，路由vue-router，网络请求vue-resource等等。
那是不是就意味着我们现在还不能用基础知识做开发，当然不是，加强动手能力是进步的最好方式，我们今天就来用学过的基础知识，来动手做一个demo：todoList案例，以此来巩固一下学过的知识，并且练练手。
看一个todo案例的效果图，然后我们来模仿它做一个：
（gif图，加载需要一丢丢时间）
本来是打算录制成视频，但是demo相对容易，通过图文并茂的形式也能让大家很好的接收，倘若后期有需要视频的反馈，我再尝试录制成视频的形式。
如果你还没看完前面的11个章节，建议你先学习，否则欲速则不达。
磨刀不误砍柴工，在动手之前，我们理一下思绪该如何实现：
1.利用vue的mvvm的特性，绑定用户输入的内容和展示在列表的内容。
2.用户勾选表示已完成，通过动态修改样式来标识已完成。
3.用户点击按钮“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,//是否完成
de
最低0.47元/天 解锁文章
2205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
