VUE创建使用组件的5种方式

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的形式

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>