【Vue】三:Vue组件: 组件使用和组件嵌套

news2024/10/6 8:29:19

文章目录

  • 1.第一个组件
    • 1.1不使用组件前
    • 1.2创建组件
    • 1.3注册组件
    • 1.4使用组件
    • 1.5 细节
  • 2.组件嵌套

1.第一个组件

1.1不使用组件前

在这里插入图片描述

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

1.2创建组件

Vue.extends({该配置项和new Vue的配置项几乎相同})

区别:
(1)创建Vue组件的时候,不能使用el配置项。但是需要使用template配置项来配置模板语句。
(2)配置项中的data,不能直接使用对象形式,要使用function。

1.3注册组件

  • 局部注册
    在配置项中使用components
    语法:
components:{
	组件名:组件对象
}
  • 全局注册
Vue.component('组件名',  组件对象)

1.4使用组件

直接使用类似使用html标签
在这里插入图片描述
在这里插入图片描述

1.5 细节

在这里插入图片描述

2.组件嵌套

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

注意简写:

components:{
	x: x,
	y: y,
}

可以简写为:

components:{
	x, y
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/618025.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MySQL 查询分析

一个低效查询引发的思考 上次在做银行对账,上传对账单后,出现对账超时的情况。查看日志发现,最后一条日志记录停在了对 c2c_zwdb.t_file_count 的查询 sql 上。使用 show processlist 命令来查看当前 SQL 的执行情况,如下&#x…

说说验证码功能的实现

前言 大家好,我是 god23bin,今天说说验证码功能的实现,相信大家都经常接触到验证码的,毕竟平时上网也能遇到各种验证码,需要我们输入验证码进行验证我们是人类,而不是机器人。 验证码有多种类型&#xff…

chatgpt赋能python:使用Python安装Gensim:简单而强大的自然语言处理库

使用Python安装Gensim:简单而强大的自然语言处理库 Gensim是一个Python库,它为自然语言处理任务和文本处理任务提供了简单而强大的接口。它可以用于文本相似性计算、主题建模、词嵌入和其他自然语言处理任务。Gensim库的优点之一是其简单性和易用性。在…

评述:量子传感器正掀起一场商业革命

光子盒研究院出品 量子传感器利用原子和光的基本属性来对世界进行测量。粒子的量子状态对环境极为敏感,这对传感来说是一个优点、但对制造量子计算机来说则是一个问题。使用粒子作为探针的量子传感器可以比设计的或基于化学或电信号的经典设备更精确地量化加速度、磁…

4.3 - 信息收集 - 端口扫描,操作系统识别

「作者主页」:士别三日wyx 「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「专栏简介」:此文章已录入专栏《网络安全快速入门》 端口&系统版本 一、端口扫描1、telnet2、Nmap3、Masscan 二、操作系统…

【链表的分类】

链表是一种常用的数据结构,它由一系列节点组成,每个节点包含一个数据元素和指向下一个节点的指针。根据节点的连接方式和节点的性质,链表可以分为多种类型。 单向链表(Singly Linked List) 单向链表是最基本的链表类…

Rust每日一练(leetDay0023) 二进制求和、左右对齐、平方根

目录 67. 二进制求和 Add Binary 🌟 68. 文本左右对齐 Text Justification 🌟🌟🌟 69. x 的平方根 Sqrt x 🌟 🌟 每日一练刷题专栏 🌟 Rust每日一练 专栏 Golang每日一练 专栏 Pytho…

低压安全用电云平台隐患故障的应用设计 安科瑞 许敏

前言:低压安全用电系统是保障用电质量的重要依托,也是增强用电安全性的根本依据。而在其中应用物联网技术,可进一步提升监测效率。在此之上,文章简要分析了低压安全用电系统的设计基准与监测内容,并通过科学制定系统建…

IMX6ULL裸机篇之I2C实验之从设备代码实现

一. I2C实验 本文介绍 I2C实验,关于 从设备 AP3216C传感器的I2C代码实现。 AP3216C从设备是 三合一传感器,即作为 I2C通信中从设备使用。 以下文章是关于 I2C实验,关于主控制器(即主设备)端的 I2C代码实现&#xff…

LinkedList源码

介绍 基于双向链表实现线程不安全插入删除效率较高&#xff0c;但不支持随机查找 public class LinkedList<E>extends AbstractSequentialList<E>implements List<E>, Deque<E>, Cloneable, java.io.Serializable常量&变量 // 元素数量transient…

秒杀抢购案例,基于 Redis 实现

目录 1、关于全局唯一 ID 生成器 1.1 需要满足的特性 1.2 代码实现 1.3 其他的唯一 ID 生成策略 2、实现秒杀下单 2.1 超卖问题的产生 2.2 超卖问题的分析与解决 2.21 悲观锁与乐观锁 2.22 乐观锁中的两种常用方案 ▶️version 版本控制方案 ▶️CAS方案 2…

AIGC资源整理

这几个月我深入研究了AIGC&#xff0c;同时业翻阅和搜集了大量的资料&#xff0c;累计也花了1000去买了各种信息源 为了方便我的好朋友们学习&#xff0c;我将那些优质的免费信息源和工具&#xff0c;都进行了整理。 如果你也想学习AIGC、ChatGPT相关的内容&#xff0c;那么我很…

深入探索:在std::thread中创建并管理QEventLoop的全面指南

深入探索&#xff1a;在std::thread中创建并管理QEventLoop的全面指南 1. 前言&#xff1a;理解QEventLoop和std::thread的基本概念1.1 QEventLoop的基本概念和工作原理1.2 std::thread的基本概念和工作原理1.3 QTimer的基本概念和工作原理 2. 在std::thread中创建QEventLoop&a…

chatgpt赋能python:Python字大小调整:优化SEO效果

Python字大小调整&#xff1a;优化SEO效果 随着互联网信息技术的不断发展&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;已经成为互联网领域的重要一环。在进行网站制作和信息发布时&#xff0c;如何提高网站的曝光度和排名成为了关键问题。针对Python编程爱好者和从业…

chatgpt赋能python:Python定义分段函数的完整指南

Python定义分段函数的完整指南 什么是分段函数&#xff1f; 当我们在解决线性和非线性方程时&#xff0c;分段函数是一个非常重要的数学工具。 分段函数可以是由不同的函数组成&#xff0c;它们在定义域中的不同部分内具有不同的公式或条款。换句话说&#xff0c;一个分段函数…

PyGame游戏编程

Python非常受欢迎的一个原因是它的应用领域非常广泛&#xff0c;其中就包括游戏开发。而是用Python进行游戏开发的首选模块就是PyGame。 1. 初识Pygame PyGame是跨平台Python模块&#xff0c;专为电子游戏设计&#xff0c;包含图像、声音等&#xff0c;创建在SDL&#xff08;…

量子前沿 | 单光子,为什么是量子科技的“源头”?

光子盒研究院出品 前言&#xff1a;基础研究是科技创新的基石。鉴于此&#xff0c;光子盒增设“量子前沿”全新栏目&#xff0c;旨在介绍量子科技的一系列基础技术、相关进展及现状前景。 我们对量子信息的兴趣出现在20世纪90年代和21世纪。在该领域的发展过程中&#xff0c;单…

文件上传与PDF报表入门

文件上传与PDF报表入门 理解DataURL的基本使用&#xff0c;实现DataURL的文件上传完成基于七牛云的文件上传 理解 JasperReport生命周期 独立完成 JasperReport的入门案例 图片上传 需求分析 如图所示&#xff0c;实现员工照片上传功能 Data URL DataURL概述 所谓DataURL是指&q…

chatgpt赋能python:Python定义未知长度数组

Python定义未知长度数组 Python是一种受欢迎的编程语言&#xff0c;广泛用于数据分析&#xff0c;人工智能&#xff0c;WEB开发和其他领域。其中一个非常方便的特性是它提供了定义未知长度数组的选项。 在本文中&#xff0c;我们将介绍如何使用Python定义未知长度数组&#x…

四、纹理显示图片

第一部分纹理基础 1)基础概念 在 OpenGLES 开发中&#xff0c;纹理除了用于装饰物体表面&#xff0c;还可以用来作为存储数据的容器。 纹理映射&#xff1a;纹理映射就是通过为图元的顶点坐标指定恰当的纹理坐标&#xff0c;通过纹理坐标在纹理图中选定特定的纹理区域&#…