个性化阅读
专注于IT技术分析

vue.js的组件和模板

一、Vue.js组件

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

vue组件与模版

例如:

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

赞(0) 打赏
未经允许不得转载:srcmini » vue.js的组件和模板
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏