Vue2，使用Vue基础语法实现github上火热的todoMVC案例

用Vue去实现todoMVC案例

安装下载初始案例

• 首先我们下去github上下载todoMVC的初始文件，文件地址如下：

https://github.com/tastejs/todomvc-app-template

当然我们也可以下载压缩包，这里不要求.

• 我们下载好后使用npm指令安装所有的依赖

npm install

• 现在我们应该可以在文件中找到index.html文件我们打开会看到一个简单的toMVC网页，没有任何的操作只有静态网页。
  
  

• 在开始前我们做最后一步骤，配置script标签，操作如下：

	<!-- Scripts here. Don't remove ↓ -->
		<script src="../../node_modules/vue/dist/vue.js"></script>
		<script src="node_modules/todomvc-common/base.js"></script>
		<script src="js/app.js"></script>

案例知识点准备

案例我们用Vue2去操作，大多都是Vue基础部分，内容涉及：各种指令的使用，监听属性，自定义属性，修饰符，生命周期等。

案例详细讲解

我会拆分成各个部分和大家一起去完成它。

头部输入框操作

• 首先我们为inex.html中的元素绑定操作。

<header class="header">
<h1>todos</h1>
<!-- 这里给输入框增加了双向绑定修饰符是去除两边空格，另外增加了鼠标抬起事件键盘修饰符是回车键，触发函数add() -->
<input class="new-todo" placeholder="What needs to be done?" autofocus v-model.trim="something.content" @keyup.enter="add">
		</header>

• 接着我们对app.js文件进行书写。

const vm = new Vue({
   
	el: '.todoapp',
	// 数据
	data: {
   
		list: [], //整个表单 
		something: {
     //单一事件
			content: '',
			isChecked: false
		}
	},
	//方法
	methods: {
   
		//添加操作：将单一事件something增加到表单
		add() {
   
			if (this.something != '') {
   
				this.list.push(this.something); //添加
				this.something = {
                //清空something
					content: '',
					isChecked: false
				}
			}
		},
	},
})

• 注意：
  • trim修饰符的使用使得判断为空更方便；
  • list的添加操作后记住清除输入框数据。

列表渲染

• 首先我们为inex.html中的元素绑定操作。

	<section class="main">
			<input id="toggle-all" class="toggle-all