html页面布局：
引用bootstrap.css,vue.js,axios.js, todo.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
</head>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<style>
.del{text-decoration: line-through;color: #ccc}
</style>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="jumbotron">
<div class="display-4">
<h3>要完成的{{count}}件事</h3>
<input type="text" class="form-control" v-model="title" @keyup.13="add">
</div><br>
<ul class="list-group list-group-flush">
<li class="list-group-item" v-for="(todo,index) in todos" @dblclick="remember(todo)">
<span :class="{del:todo.isSelected}" v-show="cur!=todo">
<input type="checkbox" v-model="todo.isSelected">{{todo.title}}
</span>
<input type="text" v-model="todo.title" v-show="cur==todo" @keyup.enter="cancel" @blur="cancel" v-focus="cur==todo">
<button class="float-right btn btn-danger btn-sm" @click="remove(todo)">×</button>
</li>
</ul>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
<script src="todo.js"></script>
</body>
</html>todo.js
todo.js :包含json数据以及添加数据，修改数据，删除数据
let vm = new Vue({
el:"#app",
data:{
todos:[
{isSelected:false,title:'吃饭'},
{isSelected:false,title:'睡觉'},
{isSelected:false,title:'打豆豆'},
],
title:'',
cur:''
},
created(){//从本地存储中获取数据
this.todos= JSON.parse(localStorage.getItem('data'))||this.todos;
},
watch:{
todos:{//wantch默认只做一层监控数据变化，深度监控
handler(){//默认写成函数
localStorage.setItem('data',JSON.stringify(this.todos))
},deep:true
}
},
directives:{
focus(el,bindings){
if(bindings.value){//点击当前li是让内部输入框获取焦点
el.focus();//获取焦点
}
}
},
methods:{
add(){
this.todos.push({
isSelected:false,
title:this.title
})
this.title=''
},
remember(todo){
this.cur = todo
},
cancel(){
this.cur=''
},
remove(todo){
this.todos=this.todos.filter(item =>item!==todo);
}
},
computed:{
count(){
return this.todos.filter(item =>!item.isSelected).length
}
}
})