本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
创建vue组件,就是为了拆分vue实例的代码量,通过不同的组件找到不同的功能。下面就介绍三种vue创建组件的方式,有需要的朋友可以参考一下,希望对大家有所帮助。方法一:使用 Vue.extend 来创建全局的Vue组件
实例:
1 2 3 | var com1 = Vue.extend({
template: '< h3 >这是使用 Vue.extend 创建的组件</ h3 >' // 通过 template 属性,指定了组件要展示的HTML结构
})
|
使用 Vue.component
('组件名称', 创建的组件对象)来创建vue组件的时候,名称使用首字母大写来命名,引用组件时,将大写的改为小写字母,两个单词之前使用 -
连接;参数一:一个标签形式来引入组件的,参数二:template
就是组件展示的HTML
内容。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < div id = "app" >
< mycom1 ></ mycom1 >
</ div >
< script >
Vue.component('mycom1', Vue.extend({
template: '< h3 >这是使用 Vue.extend 创建的组件</ h3 >'
}))
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
});
</ script >
|
得到的结果是:
方法二:直接使用 Vue.component
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | < body >
< div id = "app" >
< mycom2 ></ mycom2 >
</ div >
< script >
Vue.component('mycom2', {
template:`< div >
< h3 >这是直接使用 Vue.component 创建出来的组件</ h3 >
< span >123</ span >
</ div > `
})
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</ script >
</ body >
|
结果:
阅读剩余部分
相关阅读 >>
怎么在vue.js插图片
使用vue.js如何实现轮播
vue中el是什么意思
vue哪一年出来的
vue如何引入bootstrap
如何在vue中使用umy-ui
vue中怎么导出excel文件?
vue中elementui是什么
vue如何注释
vue table 表格利用formatter属性格式化数据
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 浅析vue创建组件的几种方式