vue.js组件初探

Vue.component('test-component', Vue.extend({
    template: '<h3 class="text-center text-success">这是一个由Vue.extend创建的组件</h3>'
}));

<div id="app">
    <test-component></test-component>
</div>

Vue.component('test-component', {
    template: '<h3 class="text-center text-danger">这是一个由Vue.component创建出来的组件</h3>'
});

<template id="tmp1">
    <h3 class="text-center text-warning">这是通过 template 元素定义的组件结构, 这是一个全局组件，可用于各个vue实例中</h3>
</template>

<template id="tmp2">
    <h3 class="text-center text-info">这是一个私有的组件，只能用于特定的vue实例</h3>
</template>

Vue.component('test-component', {
    template: '#tmp1'
});

let vm2 = new Vue({
    el: "#app2",
    data: {},
    components: { // 定义私有组件
        'private-component': {
            template: "#tmp2"
        }
    }
})

Vue.component('test', {
    template: '#tmp',
    data: function () { // 必须用function返回一个对象
        return {
            msg: '我是组件中data定义的数组，我狂得很'
        }
    }
});

<template id="tmp">
    <h3 class="text-center text-success">{{ msg }}</h3>
</template>

Vue.component('counter', {
    template: '#tmp',
    data: function () {
        return { count: 0}
    },
    methods: {
        increment() {
            this.count++;
        }
    }
});

<template id="tmp">
    <div>
        <button class="btn btn-success" @click="increment">计数器</button>
        <h3>{{ count }}</h3>
    </div>
</template>

<div id="app">
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>