一、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代码块,更加注重样式。