# 组件模板抽离（了解）
将模板写在注册组件对象的template属性上，这会让代码看起来非常难看，而且容易遮挡我们的视觉。
```
<div id="app">
<my-article></my-article>
</div>
<script>
Vue.component('my-artilce',{
template:`
<div>
<h3>这是标题</h3>
<p>段落</p>
</div>`
})
var vm = new Vue({
el:'#app'
})
</script>
```
可以将它们单独拆分到template标签中，并且指定ID名称。在注册对应的template位置放上指定的ID名称即可。
```
<div id="app">
<my-article></my-article>
</div>
<template id="myarticle">
<div>
<h3>这是标题</h3>
<p>段落</p>
</div>
</template>
<script>
Vue.component('my-artilce',{
template:'#myarticle'
})
var vm = new Vue({
el:'#app'
})
</script>
```
:-: 
