VUE创建使用组件的5种方式
- 第一种，以.$mount挂载形式
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
//将组件添加到ID为mount-point的标签上显示
new Profile().$mount('#mount-point')；
- 第二种，以id的形式
html" title=js>js代码
Vue.component("div1",{
template: '#template'
})
html代码
<template id="template">
<div>我是组件</div>
</template>
- 全局组件，传入Vue.extend对象
Vue.component("p-1",Profile);
使用方式，在html内添加标签
<p-1></p-1>
- 第四种 ，Vue.component 的第二个参数直接传入对象，第二个参数传入后会自动调用 Vue.extend
Vue.component("p-2",{
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
});
//调用方式，在html内添加如下标签
<p-2></p-2>
- 第五种 ，使用components参数局部添加
调用方式
<button1></button1>
