Vue 2.0 初探（三）

把之前做的内容中的列表和form表单抽出来做成两个组件吧，组件其实就是重复多次使用的模板，来看怎么抽取
要使用 text/x-template 类型的 script 标签，设置好唯一的 id

然后声明这些组件，之前的 methods 也要抽取出来，属性也要放在这里使用，要注意一点，组件中的 data 与之前的 data 是不一样的，之前的是属性，而组件中的是方法，所以要按照下面的写法来写

Vue.component('todo-items',{
	template: '#todo-items-template',
	props: ['todos'],
	methods: {
		deleteTodo(index){
			this.todos.splice(index, 1)
		},
		togoCompleted(todo){
			todo.completed = !todo.completed;
		}
	}
})

Vue.component('todo-form',{
	template: '#todo-form-template',
	props: ['todos'],
	data(){
		return {
			newTodo:{id:null,title:'',completed:false}
		}
	},
	methods: {
		addTodo(newTodo){
			this.todos.push(newTodo)
			this.newTodo = {id:null,title:'',completed:false}
		}
	}
})

最后来看一下怎么使用，注意传参，要使用 :参数名 的方式进行传参

HTML页面中的代码瞬间就少了很多~