vue.js组件初探

组件的作用

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

组件化与模块化的区别：

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

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

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

全局定义组件

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

创建组件

Vue.component('test-component', Vue.extend({
    template: '
这是一个由Vue.extend创建的组件
'
}));

页面中引用组件

具体代码

组件

• 直接使用Vue.component

Vue.component('test-component', {
    template: '
这是一个由Vue.component创建出来的组件
'
});

具体代码

• 使用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定义的数组，我狂得很'
        }
    }
});

显示数据

具体代码

组件定义数据

案例:制作一个计数器

计数器组件的功能

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

计数器样式

多次调用计数器

具体代码

计数器.gif

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