vue.js:组件化的实现和使用过程
创始人
2024-03-26 01:31:27
0

什么是组件化?

当我们遇到复杂问题的时候:

  • 任何一个人处理信息的逻辑能力都是有限的
  • 所以,当我们面对一个复杂的问题的时候,我们不可能一次性搞定处理掉一大堆内容
  • 但是我们都会有问题拆解的能力
  • 将一个复杂的问题拆解成很多小的问题处理,再将这些小问题放到整体中,这样很多问题都会迎刃而解了

Vue组件化思想

  • 组件化是Vue.js中的一个重要的思想
    • 它提供的是一种抽象,可以让我们开发一个个独立可复用的小组件来构造我们的应用。
    • 任何一个组件都会被抽象为一棵树。

组件抽象为组件树
注册组件的基本步骤
组件的使用分为3个步骤:

  • 创建组件构造器
const cpnC = Vue.extend({template:`

我是标题

我是内容:哈哈哈

我是内容:呵呵呵

`

在这里插入图片描述

  • 注册组件
Vue.component('my-cpn',cpnC)

在这里插入图片描述

  • 使用组件




在这里插入图片描述
在这里插入图片描述

需求:当有一块内容需要重复显示的时候就可以利用组件化的思想–>将一块内容重复显示4次

1.一般方法

我是标题

我是内容:哈哈哈

我是内容:呵呵呵

我是标题

我是内容:哈哈哈

我是内容:呵呵呵

我是标题

我是内容:哈哈哈

我是内容:呵呵呵

我是标题

我是内容:哈哈哈

我是内容:呵呵呵

2.组件化实现





完整代码


组件化的基本使用

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...
有效的括号 一、题目 给定一个只包括 '(',')','{','}'...
【Ctfer训练计划】——(三... 作者名:Demo不是emo  主页面链接:主页传送门 创作初心ÿ...