版本01
<template>
<!-- vue 的模板里面，所有的内容要被一个根节点包含起来-->
<div id="app">
<input type="text" v-model="todo"/> <!-- 双向绑定了 'todo'-->
<button @click="doAdd()">+ 增加</button>
<br>
<hr>
<br>
<ul>
<li v-for="(item,key) in list">
{{item}} ------- <button @click="deleteDate(key)">- 删除</button><!--通过取得索引值来完成此功能。此key为实参,数组下标-->
</li>
</ul>
</div>
</template>
<script>
export default { // 表示将组件暴露出去
// name: 'App', 给组件起个名字，可以删除
data () { //业务逻辑里定义的数据
return {
todo:'',
list:[],
}
},
methods:{ //这里是放方法的地方
doAdd(){
//1.获取文本框输入的值 2.把文本框中的值push进list中
this.list.push(this.todo); //将todo push到list中
this.todo=''; // 再将它为空
},
deleteDate(key){ //此key为形参
// alert(key)
/*splice 的语法格式
array.splice(index,howmany,item1,.....,itemX)
index 必需,规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。
如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素*/
this.list.splice(key,1);//从key开始删除一个元素
}
}
}
</script>
<style>
</style>
01版本的代码中有双向绑定数据，定义/执行方法以及循环渲染数据等相关操作，部分地方也都做好了注释。但目前的页面样式较为简陋：
版本02
<template>
<!-- vue 的模板里面，所有的内容要被一个根节点包含起来-->
<div id="app">
<input type="text" v-model="todo" /> <!-- 双向绑定了 'todo'-->
<button @click="doAdd()">+ 增加</button>
<br>
<hr>
<br>
<h2>进行中</h2>
<ul>
<li v-for="(item,key) in list" v-if="!item.check">
<input type="checkbox" v-model="item.check"/>{{item.title}} ------- <button @click="deleteDate(key)">- 删除</button><!--此key为实参,数组下标-->
<!-- 加一个 v-if语句，item.check=false 将在“进行中”里 ，再将item-check作为一个model放入input中 -->
</li>
</ul>
<!-- 添加了一个双向绑定，同时也实现了：在勾选checkbox时，会自动进入所对应的"进行中"和"完成中" -->
<br>
<h2>已完成</h2>
<ul>
<li v-for="(item,key) in list" v-if="item.check">
<input type="checkbox" v-model="item.check"/>{{item.title}} ------- <button @click="deleteDate(key)">- 删除</button><!--此key为实参,数组下标-->
<!--同样也是 加一个 v-if语句，item.check=true 将在“进行中”里 ，再将item-check作为一个model放入input中 -->
</li>
</ul>
</div>
</template>
<script>
/*
['gym是个404','yjl是个500'],这样模拟数据很难分清它的状态
而下面这样模拟数据的话，很清晰的分清了它的状态
[
{
title:gym是个404,
check:true
},
{
title:yjl是个500,
check:false
}
]
*/
export default { // 表示将组件暴露出去
// name: 'App', 给组件起个名字，可以删除
data () { //业务逻辑里定义的数据
return {
todo:'',
list:[
{
title:'gym是个404',
check:true
}, //这两个数据为默认数据
{
title:'yjl是个500',
check:false
}
],
}
},
methods:{ //这里是放方法的地方
doAdd(){
//1.获取文本框输入的值 2.把文本框中的值push进list中
if(this.todo != ''){
this.list.push({
title:this.todo,
check:false, //状态默认为false
});
//将todo push到list中
this.todo=''
} // 添加完数据之后，输入框为空
},
deleteDate(key){ //此key为形参
/*splice 的语法格式
array.splice(index,howmany,item1,.....,itemX)
index 必需,规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。
如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX 可选。要添加到数组的新元素*/
this.list.splice(key,1);//从key开始删除一个元素
}
}
}
</script>
<style>
</style>
02版本的代码提升了一个层次，实现了基本功能。多处用到了双向绑定。但页面样式没做编写。效果如下：
样式可自行添加，Vue todolist小实例基本完成了。希望对读者能有帮助。若有任何疑问或是不解请在下方评论，谢谢。