本文算是[初识]部分的最后一节，这个部分在你学习的时候，一定会有很多不明白的地方，这都不要紧。你只要课后敲出这些代码，能够和截图中一样的效果就算完成任务了。
如何编写一个组件？
Vue 中一个最主要的特性，就是让你使用组件化进行开发。页面上你看到的任何的东西，都可以写成组件。先来看看如何编写一个静态的 Vue 组件，编写一个标题组件。
新建一个Demo5.html文件，然后把Demo4.html的内容全部拷贝过来。为了方便书写，把<script>标签的第一行前，声明一个变量，比如就叫做app，声明完变量之后，就可以把mount部分独立出来了。
const app=Vue.createApp({
//.....somting........
app.mount("#app")
有了app变量，可以非常方便的自定义组件并使用了。比如现在写一个关于标题的组件。
app.component('my-title', {
template: '<h1 style="text-align:center">大宝剑城</h1>'
})
有了这个组件，就可以在app的模板部分使用了，比如我们放在template的最上面，代码如下：
template: `
<div>
<my-title />
<!--...somting......-->
</div>
`
此时完整代码如下：
<script>
const app = Vue.createApp({
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleAddItem() {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
template: `<div>
<my-title/>
<input v-model="inputValue" />
<button v-on:click="handleAddItem">增加佳丽</button>
<ul>
<li v-for="(item, index) of list">[{{index}}]{{item}}</li>
</ul>
</div>`
})
app.component('my-title', {
template: '<h1 style="text-align:center;">大宝剑城</h1>'
})
app.mount("#app")
</script>
效果如下：
![05. [初识]Vue3组件化开发 1](/d/file/webqianduan/n5f0bkflmtan5f0bkflmta.png "05. [初识]Vue3组件化开发 1")
这时候肯定会有小伙伴认为，这也没有减少代码的工作量哦，第一是因为我们的代码还比较简单，第二是组件的意义是降低程序的耦合性，让大规模开发编程可能。比如一个页面，分成几个人开发，每个人写不同的模块，写好后拼凑在一起。有了组件这就变的非常容易。
本文的内容稍微有点绕，如果你听不太懂也没关系，关键是把代码写出来，为了方便学习，这里给出Demo5.html的全部代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleAddItem() {
this.list.push(this.inputValue)
this.inputValue = ''
}
},
template: `<div>
<my-title/>
<input v-model="inputValue" />
<button v-on:click="handleAddItem">增加佳丽</button>
<ul>
<my-jiali
v-for="(item, index) of list"
v-bind:item="item"
v-bind:index="index"
/>
</ul>
</div>`
})
app.component('my-title', {
template: '<h1 style="text-align:center;">大宝剑城</h1>'
})
app.component('my-jiali',{
props:['index','item'],
template: `<li>[{{index}}]-{{item}}</li>`
})
app.mount("#app")
</script>
</html>