vue.js组件初探

组件的作用

vue.js组件的作用：拆分功能，便于复用。

组件化与模块化的区别：

• 模块化：从代码逻辑的角度进行划分，每个功能模块的职能单一

• 组件化：从UI界面的角度进行划分，便于UI的复用

一个页面的ui可以切割成由不同的组件构成，这些组件毕竟独立，这样拆分的好处在于可以做到如同堆积木般快速将页面搭建及重构

全局定义组件

• 使用Vue.extend配合Vue.component方法

创建组件

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

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

具体代码

• 使用template标签定义组件

定义两个组件

<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>

具体代码

计数器.gif

更多vue.js的有趣实例，请点击移步至目录