vue.js的组件和模板

一、Vue.js组件

我们在vue.js框架快速入门简明教程(六)：组件讨论过有关vue.js组件的创建和使用方式，在这里在来补充一下，Vue.js组件需要注册，无论是全局还是局部，都需要经过以下几个步骤才能被使用，但是我们一般都是使用局部注册组件，以便以后在其他地方可以使用这个组件。

例如：

<div id="example">
<my-component></my-component>
</div>

</body>
<script type="text/javascript">
// 定义
var MyComponent = Vue.extend({
template: '<div>我是vue.js组件</div>'
})
// 注册
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
el: '#example'
})
</script>


输出：我是vue.js组件

二、vue.js模版

模版是可以被浏览器直接解析的html语句，所以创建模版要比创建组件简单很多。定义模版时，我也建议把模版写出来，不要写到vue.js里面，这样需要修改模版的时候就直接修改，不用搞懂数据，看起来也清晰。

例如：

<template id="template">
<h1>vue.js模版</h1>
</template>
//创建模版

</body>
<script type="text/javascript">
var app=new Vue({
el:"#example",
data:{
},
template:"#template"//挂载模版
})
</script>

三、组件和模版之间的联系

通过上面的例子，我们会发现，组件中包含着模版。使用组件的时候就用到了组件里面的模版，更加整体，更加注重数据传递。注册的组件可以用组件名来做html标签，而模版是html代码块，更加注重样式。