vue.js:组件化的实现和使用过程

news/2024/10/31 4:22:48/

什么是组件化?

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

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

Vue组件化思想

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

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

  • 创建组件构造器
const cpnC = Vue.extend({template:`<div><h2>我是标题</h2><p>我是内容:哈哈哈</p><p>我是内容:呵呵呵</p></div>`

在这里插入图片描述

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

在这里插入图片描述

  • 使用组件
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>

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

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

1.一般方法

<div><h2>我是标题</h2><p>我是内容:哈哈哈</p><p>我是内容:呵呵呵</p>
</div>
<div><h2>我是标题</h2><p>我是内容:哈哈哈</p><p>我是内容:呵呵呵</p>
</div>
<div><h2>我是标题</h2><p>我是内容:哈哈哈</p><p>我是内容:呵呵呵</p>
</div>
<div><h2>我是标题</h2><p>我是内容:哈哈哈</p><p>我是内容:呵呵呵</p>
</div>

2.组件化实现

<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>

完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="author" content="xiaonaihu" /><meta name="generator" content="HBuilder X" /><title>组件化的基本使用</title><script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><!-- 3.使用组件 --><my-cpn></my-cpn><my-cpn></my-cpn><my-cpn></my-cpn><my-cpn></my-cpn></div><script type="text/javascript">// 1.创建组件的构造器对象const cpnC = Vue.extend({template:`<div><h2>我是标题</h2><p>我是内容:哈哈哈</p><p>我是内容:呵呵呵</p></div>`})// 2.注册组件Vue.component('my-cpn',cpnC)var app = new Vue({el: "#app",data:{message:"hello vue"}});</script></body>
</html>

http://www.ppmy.cn/news/2558.html

相关文章

学会这些C语言技巧,你的编程能力大大提升

一、函数指针 在讲回调函数之前&#xff0c;我们需要了解函数指针。 我们都知道&#xff0c;C语言的灵魂是指针&#xff0c;我们经常使用整型指针&#xff0c;字符串指针&#xff0c;结构体指针等 int *p1; char *p2; STRUCT *p3; //STRUCT为我们定义的结构体 但是好像我们…

Kubernetes那点事儿——日志管理

K8s日志管理前言一、日志二、K8s应用日志标准输出应用日志收集1、emptyDir挂载收集2、边车容器收集前言 程序运行中输出的日志默认暂存在Pod中&#xff0c;当Pod销毁重建时&#xff0c;日志也会丢失。所以需要一些持久化的方法保存程序日志。 一、日志 K8s系统日志 kubelet组件…

【Paper】2021_具有输入饱和的多智能体系统非负连边比例一致性研究_范志鹏

范志鹏. 具有输入饱和的多智能体系统非负连边比例一致性研究[D].华中科技大学,2021.DOI:10.27157/d.cnki.ghzku.2021.001324. 文章目录3 基于状态反馈的线性离散正系统连边比例一致性控制3.1 引言3.2 基于状态反馈的离散时间连边比例一致性的问题描述3.3 无向网络离散时间连边比…

C语言实现一个闪烁的圣诞树(控制台)

下下下周就是圣诞节啦&#xff0c;C语言的圣诞树必须安排起&#xff01;&#xff01;&#xff01; 效果展示&#xff1a; 原理说明&#xff1a; 函数 layer 画出树的层次&#xff0c;根据坐标来输出位置&#xff1b; void layer(int x, int y, int num, int col) 函数 tri…

【有营养的算法笔记】归并排序

&#x1f451;作者主页&#xff1a;进击的安度因 &#x1f3e0;学习社区&#xff1a;进击的安度因&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;有营养的算法笔记 文章目录一、思路二、模板讲解三、模板测试四、加练 —— 逆序对的数量今天讲解的内容是…

Alvas.Audio专门为C#和VB.Net程序员设计

Alvas.Audio专门为C#和VB.Net程序员设计 Alvas.Audio库使C#和VB.Net程序员能够创建执行(包括混合声音信息)、捕获、转换和编辑音频的应用程序。 Alvas.Audio音频是C#音乐库。Web程序员。 这使您能够生产。NET程序&#xff0c;例如Winforms/WPF/Windows服务/控制台录音机、Inter…

机器学习-模型评估与选择(待更新)

本章主要讲解机器学习的基础知识&#xff0c;有关一些专业术语的定义与解释。 文章目录2.1 经验误差与过拟合2.2 评估方法2.2.1 留出法2.2.2 交叉验证法2.2.3 自助法2.2.4 调参与最终模型2.3 性能度量2.3.1 错误率与精度2.3.2 查准率、查全率与F12.3.3 ROC与AUC2.1 经验误差与过…

观看2022年卡塔尔世界杯的感想

每四年一度的世界杯又开始了&#xff0c;刚好在假期&#xff0c;这可是自我懂事以来第一次认真的观看。每到有球赛时我们父子齐上阵&#xff0c;摩拳擦掌、看到精彩时不忘高声齐呼&#xff0c;于是客厅就变成我们爷俩的绿茵场了。 几场下来&#xff0c;我只看到白皮肤&…