组件化是框架的一大特色，Vue也不例外，组价化带来很高的复用性，直接提高了工作效率。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>todoList的组件拆分</title>
<!-- 在head里面引入，避免闪屏问题 -->
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<!-- v-model双向数据绑定 -->
<input v-model="inputValue"/>
<!-- 绑定点击事件 -->
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!-- 使用组件来实现，同时绑定属性：content="item" 传参item用以达到动态展示效果 -->
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item"
></todo-item>
</ul>
</div>
<script>
// 定义全局组件
Vue.component("todo-item",{
// 传参后不能直接使用，必须接收一下才可以使用
props:['content'],
template: '<li>{{content}}<li>',
})
// 定义局部组件,局部组件需要使用components声明才能使用
// var TodoItem = {
// template:"<li>item</li>"
// }
new Vue({
el:"#root",
// 调用局部组件需要在这里做一个组件的声明
// components:{
// "todo-item":TodoItem
// },
data:{
inputValue:'',
list:[],
},
// 添加事件
methods:{
handleSubmit: function(){
// 将inputValue push到数组中
this.list.push(this.inputValue),
// 清空输入框
this.inputValue=''
}
}
})
</script>
</body>
</html>
