（22）Vue.js 综合案例：TodoMVC

一、TodoMVC介绍

TodoMVC 是一个经典项目，让开发者快速实践到框架开发方式。

官网地址：http://todomvc.com/

TodoMVC一句话评价：功能完备不冗余，多样实现引深思。

其实就说的是我们可以再内容中去使用到Vue.js的语法，但不会为了去练习语法而练习语法，再不同的场景体会语法带来的不同效果，对语法进行更深刻的理解。

二、TodoMVC准备工作

• 从 github 克隆项目模板。
• git clone https://github.com/tastejs/todomvc-app-template.git
• 进入项目目录，安装项目依赖
• cd 项目目录
• npm install
• 安装 Vue.js
• npm install vue 

通过服务的方式打开网页，我们打开控制台发现，有404资源未找到的错误。

解决404报错问题

我们将base.js文件引入的地方删掉，就可以啦！

三、TodoMVC需求分析

一、事项列表展示
   • 有事项的情况
   • 没有事项的情况

• 引入 vue.js 文件，创建 Vue 实例设置挂载元素。

引入未压缩的vue.js文件，方便我们使用DevTools插件调试。压缩的vue.js文件无法使用该插件。 

• 在 data 中设置 todos 存储初始数据。

app.js文件 

(function (window) {
	'use strict';

	// Your starting point. Enjoy the ride!
	new Vue({
		el: '#app',
		data: {
			todos: [
				//todos用于存储所有事项信息
				{ id: 1, title: '示例内容1', completed: true},
				{ id: 2, title: '示例内容2', completed: false},
				{ id: 3, title: '示例内容3', completed: false},
			]
		}
	})

})(window);

设置事项视图：

index.html文件 

<li v-for="todo in todos" :key="todo.id" :class="{completed:todo.completed}">
	<div class="view">
	    <!-- 选框 -->
	    <input class="toggle" type="checkbox" v-model="todo.completed">
	    <label>{{ todo.title }}</label>
	    <button class="destroy"></button>
	</div>
	    <input class="edit" value="Rule the web">
</li>

 设置有无事项时的显示状态：

index.html文件 

<section class="main" v-show="todos.length">

...

</section>
<footer class="footer" v-show="todos.length">

...

</footer>

二、状态栏信息展示

需要实现的功能为：• 个数展示   • 单位处理 

• 个数展示 

app.js文件

computed: {
//用于获取待办事项个数
			remainning() {
				//return this.todos.filter(todo => !todo.complted).length;
				return this.todos.filter(function (todo) {
					return !todo.completed;
				})
			}
		}

index.html文件

<footer class="footer" v-show="todos.length">
	<!-- This should be `0 items left` by default -->
	<span class="todo-count"><strong>{{ remaining }}</strong> item left</span>
	<!-- Remove this if you don't implement routing -->
	<ul class="filters">
	  <li>
			<a class="selected" href="#/">All</a>
	  </li>
	  <li>
			<a href="#/active">Active</a>
	  </li>
	  <li>
			<a href="#/completed">Completed</a>
	  </li>
	</ul>
	<!-- Hidden if no completed items are left ↓ -->
	<button class="clear-completed">Clear completed</button>
</footer>

• 单位处理（方法一） 

app.js文件

methods: {
			//单位处理，当待办事项为1时，显示item，当为除了1以外其他数字时为items
			//注意：0也是items
			pluralize: function () {
				return this.remaining === 1 ? 'item' : 'items';
			}
		}

 index.html文件

<footer class="footer" v-show="todos.length">
	<!-- This should be `0 items left` by default -->
	<span class="todo-count"><strong>{{ remaining }}</strong> {{ pluralize() }} left</span>
	<!-- Remove this if you don't implement routing -->
	<ul class="filters">
		<li>
			<a class="selected" href="#/">All</a>
		</li>
		<li>
			<a href="#/active">Active</a>
		</li>
		<li>
			<a href="#/completed">Completed</a>
		</li>
	</ul>
	<!-- Hidden if no completed items are left ↓ -->
	<button class="clear-completed">Clear completed</button>
</footer>

• 单位处理（方法二） 

app.js文件 

methods: {
			//单位处理，当待办事项为1时，显示item，当为除了1以外其他数字时为items
			//注意：0也是items
			pluralize: function (word) {
				return word + (this.remaining === 1 ? '' : 's');
			}
		}

 index.html文件

<footer class="footer" v-show="todos.length">
	<!-- This should be `0 items left` by default -->
	<span class="todo-count"><strong>{{ remaining }}</strong> {{ pluralize() }} left</span>
	<!-- Remove this if you don't implement routing -->
	<ul class="filters">
		<li>
			<a class="selected" href="#/">All</a>
		</li>
		<li>
			<a href="#/active">Active</a>
		</li>
		<li>
			<a href="#/completed">Completed</a>
		</li>
	</ul>
	<!-- Hidden if no completed items are left ↓ -->
	<button class="clear-completed">Clear completed</button>
</footer>

三、事项状态切换

需要实现的功能为：• 单个事项切换   • 多个事项切换

单个事项切换通过 v-model 的设置已经实现了，体会双向数据绑定的好处。

多个事项切换分为 2 部分功能：• 单个事项操作  • 全部切换选框操作

单个事项切换会导致 toggle-all 状态变化，我们可以通过remaining 来进行判断：

四、TodoMVC功能实现