我们都知道，现在Vuejs的前端开发的最火的三大框架之一，它极大地方便了我们的前端工作者的工作，这是笔者整理的一份用vue写的一个todolist的整个过程。

1.新建一个文件夹，配置环境变量

安装的命令行有：npm init -ynpm i -S todomvc-app-css underscore vue

2.新建一个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-focusVue.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>

以上就是整理的所有内容，有写的不好的或者错误的，请及时告诉我改正