这一节课将是我们初始vue章节的最后一节课，学完这节课之后我们将进入到vue的基础学习。这个章节的目的是让我们对vue提前打一个小基础属于热身运动，通过几个小案例的编写来让我们感受一下vue的特性。
编写一个组件
在vue中组件化开发也是一项非常重要的特性，万物皆组件。很多个组件组成一个页面。 在开发过程中，任何东西你都可以编写成一个组件，我们来对任务管理器进行组件化拆分。
新建一个 demo5.html 文件，把上节课的代码复制过来。
我们用一个 常量 名 app 来接收vue创建之后返回的实例对象。 mount() 是vue实例对象里的方法。把它改写成app.mount("#app")
//修改此处
const app=Vue.createApp()
//修改此处
app.mount("#app")在 mount() 方法前面，使用app.component() 方法来创建一个组件。这个组件取名叫title-bar。然后给它定义一个template模版。写个标签来显示一下标题。
app.component("title-bar", {
template: `<h3>任务管理</h3>`
})组件创建完了，在app里的 template 中去使用这个组件，跟标签一样的写法两个尖括号中间是组件名称。
template:`
<div>
<!--修改此处-->
<title-bar/>
<input v-model="inputText" type="text"/>
<button v-on:click="handelAddItem">添加</button>
<ul>
<li v-for="(item,index) of list">{{item}}--{{index}}</li>
</ul>
</div>
`,在浏览器中，大家就可以看这个组件已经出现在界面上了
动态组件
我们现在知道了组件的创建和使用，我们把 任务管理器 这个小案例给它拆分一下，把ul列表部分给它提取拆分出来，使用 component 方法再来创建一个组件。取名 todo-list，template 模板部分复制上面ul的所有代码。
使用 props 为组件定义一个属性 ， dataList ，用来接收app的 list 数据， props 是可以定义多个属性的，所以
它接收得是一个字符串类型的数组。
然后li的v-for指令我们就可以让它去遍历 datalist 参数。
app.component("todo-list",{
props:["list"],
template:`
<ul>
<li v-for="(item,index) of list">{{item}}--{{index}}</li>
</ul>
`
})组件我们创建好了， 现在去使用这个组件，把app里的模板修改一下，把ul部分代码替换成我们创建的这个 todo-list 组件。 然后我们通过属性赋值的方式把 list数组 数据传入给组件内部，我们使用 v-bind 指令，给属性 datalist 绑定数据 ，写法是这样。
template:`
<div>
<!--修改此处-->
<title-bar/>
<input v-model="inputText" type="text"/>
<button v-on:click="handelAddItem">添加</button>
<todo-list v-bind:ist="list" />
</div>
`,浏览器上看看效果。是不是跟我们没拆分前没什么变化呀。
组件化拆分有很多优势：
把多行代码拆分成组件，可以保持代码整洁，不会出现大堆代码堆积。
方便按需分析代码，需要修改那一个组件，就直接去看那个组件的代码。
方便多人协作开发，一个复杂的页面，可以多个人拆分成多个组件来开发。
代码复用性高，某些组件可能会使用到很多次，使用组件化开发方便一次开发多次使用。
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>任务管理</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app=Vue.createApp({
data(){
return {
list: ["吃饭", "睡觉", "工作", "娱乐"],
inputText:""
}
},
methods: {
handelAddItem(){
this.list.push(this.inputText)
this.inputText = ''
}
},
template:`
<div>
<!--修改此处-->
<title-bar/>
<input v-model="inputText" type="text"/>
<button v-on:click="handelAddItem">添加</button>
<todo-list v-bind:dataList="list" />
</div>
`,
})
app.component("title-bar", {
template: `<h3>任务管理</h3>`
})
app.component("todo-list",{
props:["list"],
template:`
<ul>
<li v-for="(item,index) of list">{{item}}--{{index}}</li>
</ul>
`
})
app.mount("#app")
</script>
</html>