目标效果：
简单的todolist功能
一个输入框，一个提交按钮，提交的内容以列表形式显示出来，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./vue.js"></script>
<meta charset="UTF-8">
<title>TodoList</title>
</head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click=handleSubmit>提交</button>
<ul>
<li v-for="(item,index) in list" key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
inputValue: '',
list: []
},
methods: {
//点击按钮时，触发方法：将输入框中的数据放入列表中
handleSubmit: function() {
this.list.push(this.inputValue),
this.inputValue = ''
}
}
})
</script>
</body>
</html>
使用了push（），将指定元素放入列表。
使用组件功能
1、全局组件：通过Vue.component定义的组件为全局组件
<todo-item v-for="(item, index) in list" :key="index" :content="item"></todo-item>
要让组件的内容为输入框的内容，要向组件传参，使用：content
Vue.component('todo-item',{
props:['content'],
template:'<li>{{content}}</li>'
})
组件中要接收到content，然后再模板中使用。
2、局部组件：
var TodoItem = {
template:'<li>item</li>'
}
在实例外定义了这个组件，要调用，则需要在实例里面声明
components: {
'todo-item': TodoItem
},
实现删除功能
点击某一待办项，则执行删除。
实现方式：在条目中增加点击事件，子组件触发点击事件后，触发一个删除事件，同时将点击的下标index传递给父组件。父组件中声明一个删除事件，接收到index，使用splice进行删除。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./vue.js"></script>
<meta charset="UTF-8">
<title>TodoList</title>
</head>
<body>
<div id="root">
<input v-model="inputValue"/>
<button @click=handleSubmit>提交</button>
<ul>
<todo-item
v-for="(item, index) in list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props: ['content','index'],
//在模板中添加点击事件
template: '<li @click=handleClick>{{content}}</li>',
methods: {
handleClick: function() {
//点击对应条目，则触发delete方法，传回父组件，参数为对应下标index
this.$emit('delete', this.index)
}
}
})
new Vue({
el: "#root",
data: {
inputValue: '',
list: []
},
methods: {
//点击按钮时，触发方法：将输入框中的数据放入列表中
handleSubmit: function() {
this.list.push(this.inputValue),
this.inputValue = ''
},
//从子组件获取的参数index，在这个方法中需要写在function括号里面
handleDelete: function(index) {
//从对应下标位置删除一项
this.list.splice(index, 1)
}
}
})
</script>
</body>
</html>
