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 条评论
登录 后参与评论

相关文章

来自专栏Web 开发

getBoundingClientRect

今天fix一个拖拽库的IE8bug,发现DOM元素有一个getBoundingClientRect的方法。

12600
来自专栏大壮

UIKit框架 - TextKit

24340
来自专栏文武兼修ing——机器学习与IC设计

HTML入门手记(1)HTML概述HTML基本语法

HTML概述 学习原因:希望制作一云项目控制工具,HTML用于提供GUI并消除不同客户端差异 学习目标:会使用HTML语言,Jinja模板和Bootstrap框...

37340
来自专栏抠抠空间

html标签详解

<!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。 <!DOCTYPE> 声明不是 HTML ...

326110
来自专栏陈仁松博客

UWP基础教程 - XAML依赖属性和附加属性

前面两章介绍了XAML的命名空间、元素和属性的概念,从本篇开始接下来会介绍XAML的高级特性,本篇主要会介绍两个概念: 依赖属性(Dependency Prop...

35950
来自专栏我的博客

phpstorm使用

1.设置多个项目并存 步骤:File–>Settings–>Directories–>Add Content Root 2.常用快捷键 Ctrl+y删除一行...

22920
来自专栏十月梦想

vue入门基础详解之组件元素不对应以及ref用法

在我们使用table时候,table的结构是table>tbody>tr>td,但是我们之间在table下面定义一个包含详情的组件,在table下使用多个会出现...

19220
来自专栏前端小叙

事件绑定的几种常见方式

在项目开发中,经常遇到绑定事件不起作用,或者事件绑定多次,导致重复触发。 1.事件绑定的几种常见方式(以click事件为例) jquery: $(select...

35580
来自专栏JetpropelledSnake

Vue学习笔记之Vue组件

vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。

10510
来自专栏较真的前端

Vue相关的前端面试题,每道题都很经典~

6.6K30

扫码关注云+社区

领取腾讯云代金券