发门网
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.组件化实现

完整代码


组件化的基本使用
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：AI绘画绘图流量主小程序开发

下一篇：Java基础面试题

相关内容

热门资讯

修复 爱普生 EPSON L4... L4151 L4153 L4156 L4158 L4163 L4165 L4166 L4168 L4...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF，目录中的页码并非PDF中直接索引的页码...
监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播，要解决的几个问题是：1&...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章，在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
【前端】‘??‘与‘||‘有什... 0 问题 经常写const data = res.data.a ?? ''或者const d...
Windows10添加群晖磁盘... 在使用群晖NAS时，我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
牛客计算器的改良（Python... 文章目录1.题目描述2.输入描述:3.输出描述:4.示例15.分析6.代码7.结语 链接࿱...
正大杯｜市调大赛｜2023备赛... 关键信息 同时随着精细化养宠趋势的深入，宠物消费类目日渐丰富。 本报告通过 Niuco...
QGIS下载在线地图（Goog... 前言 国内外有很多在线地图下载软件，但功能单一，基本上只能下载数据&#x...