专栏首页codingvue.js组件初探

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>

具体代码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • transition-group实现动画效果

    如果要实现动画效果的元素是通过v-for循环渲染出来的,就不能使用transition,应该用transition-group将元素包裹

    章鱼喵
  • django2.0入门教程第三节

    章鱼喵
  • centos7安装mongodb

    建议:直接看官方文档最直接,其他第三方的文章很多是过时的,或者写得不全面,很可能倒腾半天也弄不成功

    章鱼喵
  • Vue.js 中的无渲染行为插槽[每日前端夜话0xF7]

    翻译:疯狂的技术宅 作者:David Desmaisons 来源:alligator

    疯狂的技术宅
  • wx小程序的自定义组件

    我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invi...

    河湾欢儿
  • 这么定义Vue组件你就赢了

    什么是组件:组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组...

    DataScience
  • 可视化搭建数据大屏系统的前端实现

    本文首发于政采云前端团队博客:可视化搭建数据大屏系统的前端实现 https://www.zoo.team/article/data-visualization

    政采云前端团队
  • 从零开始学 Web 之 Vue.js(六)Vue的组件

    在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

    Daotin
  • 30 道 Vue 面试题,内含详细讲解(中)

    比如有父组件 Parent 和子组件 Child,如果父组件监听到子组件挂载 mounted 就做一些逻辑处理,可以通过以下写法实现:

    咻咻ing
  • Vue 组件化开发

      将实现页面某一部分功能的结构、样式和逻辑封装成为一个整体,使其高内聚,低耦合,达到分治与复用的目的。在前端范畴,我们可以用下面的这张图来简单地理解组件化:

    Demo_Null

扫码关注云+社区

领取腾讯云代金券