我们都知道，现在Vuejs的前端开发的最火的三大框架之一，它极大地方便了我们的前端工作者的工作，这是笔者整理的一份用vue写的一个todolist的整个过程。
1.新建一个文件夹，配置环境变量
安装的命令行有：
npm init -y
npm i -S todomvc-app-css underscore vue2.新建一个html文件，复制格式化后的代码段，网址：http://todomvc.com/examples/b...
将代码段里边的显示内容修改为中文3.引入Vuejs css等文件
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/underscore/underscore-min.js"></script>
<script src="js/store.js" charset="utf-8"></script>4.新建一个vue实例(框架)
<script src="./node_modules/vue/dist/vue.min.js" charset="utf-8"></script>
<script>
// 新建一个Vue的实例对象
var todoapp = new Vue({
// 挂载
el: ‘.todoapp‘,
// 数据
data: {
},
// 计算属性
computed: {
}
})
</script>5.实现的全过程
向data中的todoList中写入数据
data: {
// 备忘录数组
todoList: [
// 一个任务就是一个对象，text表示任务的名称，checked为true表示已完成，false表示未完成
{
text: ‘学习Vue‘,
checked: false
},
{
text: ‘学习React‘,
checked: false
}
]
},
6.给li元素加上v-for指令，代码如下:
<li class="completed" v-for="(todo,index) in todoList" :key="‘todo-‘+index">
7.<label>中显示输入的任务，代码如下：
<label>{{ todo.text }}</label>
8.修改任务的checked值为true
{
text: ‘学习React‘,
checked: true
},9.给li元素动态绑定class,completed样式的值，根据todo.checked, 如果todo.checked为 true时则有completed样式，否则无completed的样式
<li :class="{completed: todo.checked}" v-for="(todo,index) in todoList" :key="‘todo-‘+index">
10.给checkbox加上v-model，值为todo.checked, checked属性会自动和todo.checked关联
<input class="toggle" type="checkbox" v-model="todo.checked"/>
11.在data中新建任务
data: {
// 新的备忘录
newTodo: ‘‘,
}
12.input元素绑定，回车事件和自动除去前后空格的任务的添加
<input class="new-todo" placeholder="你接下来需要完成什么?" autofocus="" v-model="newTodo" @keyup.enter.trim="addTodo"/>
// 添加任务的方法,在methods中添加
addTodo() {
// 去除前后的空格
this.newTodo = this.newTodo.trim();
//内容为空
if (this.newTodo.length < 1) {
return;
}
// 新建的任务添加到数组,默认状态为未完成
this.todoList.unshift({
text: this.newTodo,
checked: false
});
// 回车后清空输入框的内容
this.newTodo = ‘‘
}
13.添加一个计算属性，判断是否显示任务列表
// 显示列表，如果有任务，则任务列表大于1，显示，如果没有任务则不显示
computed: {
showList() {
return this.todoList.length > 0;
}
}
14.添加v-show:指令到section和footer
<section class="main" v-show="showList">
<footer class="footer" v-show="showList">
15.绑定删除任务事件
<button class="destroy" @click="deleteTodo(todo)"></button>
引入underscore
<script src="./node_modules/underscore/underscore-min.js" charset="utf-8"></script>
16.删除任务方法写在methods中
methods: {
// 删除任务
deleteTodo(todo) {
this.todoList = _.without(this.todoList, todo)
}
}
17.任务建立之后想要在任务上修改的方法
<input class="edit" type="text" v-model="todo.text" />
进入编辑模式
添加一个数据项：
data: {
// 正在编辑的任务索引
editingIndex: -1,
}
绑定双击事件：
<label @dblclick="editTodo(index)">{{ todo.text }}</label>
方法
methods: {
// 编辑任务
editTodo(index) {
// 设置一下当前正在编辑的索引
this.editingIndex = index;
}
}
18.在li中加上class
<li :class="{completed: todo.checked, editing: index === editingIndex}" v-for="(todo,index) in todoList" :key="‘todo-‘+index">
自定义指令,（写在script中）：
// 注册一个全局自定义指令 v-focus
Vue.directive(‘focus‘, {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus();
},
update(el) {
el.focus();
}
})19.使用自定义指令
<input class="edit" type="text" v-model="todo.text" v-focus="index === editingIndex"/>
添加保存todo, 实际上就是把input框取消
<input class="edit" type="text" v-model="todo.text" v-focus="index === editingIndex" @blur="saveTodo(todo)" @keyup.enter="saveTodo(todo)"/>
保存的方法
methods: {
...
// 保存任务，因为是动态绑定的，不需要再保存，只需要把input框隐藏即可
saveTodo(todo) {
this.editingIndex = -1
if (todo.text.trim().length < 1) {
this.deleteTodo(todo)
}
}
}
20.未完成的数量
computed: {
// 未完成的任务数量
activeCount() {
return this.todoList.filter(item => {
return !item.checked
}).length;
}
}
21.数据保存到本地localStorage，新建store.js文件
var STORAGE_KEY = ‘todoList‘
window.todoStorage = {
fetch() {
try {
return JSON.parse(localStorage.getItem(STORAGE_KEY) || ‘[]‘);
} catch(error) {
return [];
}
},
save(todoList) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(todoList));
}
}
引入store.js
<script src="./js/store.js" charset="utf-8"></script>
在data中修改初始化数据：
data: {
todoList: todoStorage.fetch()
}
22.在Vue实例中添加一个属性变化观察，全局
// 观察属性变化
watch: {
todoList: {
deep: true,
handler: todoStorage.save
}
},
23.全部完成功能的添加
添加计算属性：
computed: {
// 是否所有任务都完成
allDone: {
get() {
// 未完成的数量为0表示全部完成,全部完成返回true
return this.activeCount === 0;
},
set(value) {
this.todoList.forEach(todo => {
todo.checked = value
});
}
}
}
使用v-model绑定全部完成功能：
<input class="toggle-all" id="toggle-all" type="checkbox" v-model="allDone" />
24.实现过滤所有，已完成，未完成的功能
在实例化Vue对象外面放一个普通的过滤对象：
```
// 一个普通的过滤的对象, 用来过滤任务列表
var filters = {
all: function (todos) {
return todos;
},
active: function (todos) {
return todos.filter(function (todo) {
return !todo.checked;
});
},
completed: function (todos) {
return todos.filter(function (todo) {
return todo.checked;
});
}
};
```
添加一个属性visibility 来表示我们要显示所有，还是显示未完成，或已完成
data: {
visibility: ‘all‘,
...
}
修改一下未完成的数量这个计算属性，使用上面的filters对象去过滤
computed: {
...
// 未完成的任务数量
activeCount() {
return filters.active(this.todoList).length;
},
}
25添加任务过滤的计算属性：
computed: {
...
// 过滤任务列表
filteredTodoList: function () {
return filters[this.visibility](this.todoList);
}
}
在DOM当中添加点击事件，点击的时候修改visiblity属性即可
<li>
<a
:class="{selected: visibility === ‘all‘}"
href="#/"
@click="visibility=‘all‘"
>所有</a>
</li>
<li>
<a
:class="{selected: visibility === ‘active‘}"
href="#/active"
@click="visibility = ‘active‘"
>未完成</a>
</li>
<li>
<a
:class="{selected: visibility === ‘completed‘}"
href="#/completed"
@click="visibility = ‘completed‘">已完成</a>
</li>
26、列表渲染的循环语句修改：
<li
:class="{completed: todo.checked, editing: index === editingIndex}"
v-for="(todo,index) in filteredTodoList" :key="‘todo-‘+index"
>
添加一个变量，得到hash值：
var visibility = location.hash.substr(location.hash.indexOf(‘/‘)+1);
visibility = visibility === ‘‘ ? ‘all‘ : visibility
设置visibility属性的值为当前的这个变量：
data: {
visibility: visibility,
...
}
27.点击清空已完成功能：
添加一个已完成的任务数量计算属性：
computed: {
...
// 已完成的任务数量
completedCount() {
return filters.completed(this.todoList).length;
}
}
添加一个清空已完成的方法：
methods: {
...
// 清空已完成的任务列表
clearCompleted() {
this.todoList = filters.active(this.todoList)
}
}28、DOM元素绑定事件，以及v-show:
<button class="clear-completed" @click="clearCompleted" v-show="completedCount > 0">清空已完成</button>以上就是整理的所有内容，有写的不好的或者错误的，请及时告诉我改正