当前位置: 首页 > news >正文

《Vue3 四》Vue 的组件化

组件化:将一个页面拆分成一个个小的功能模块,每个功能模块完成自己部分的独立的功能。任何应用都可以被抽象成一棵组件树。

Vue 中的根组件:

Vue.createApp() 中传入对象的本质上就是一个组件,称之为根组件(APP 组件)。

<div id="app"><div>{{message}}</div>
</div><script>// 组件const APP = {data() {return {message: 'Hello Vue',}},  }   // Vue.createApp() 中传入对象的本质上就是一个组件,称之为根组件(APP 组件)const app = Vue.createApp(APP)app.mount('#app')
</script>

注册组件:

每个组件都可以拥有自己的模板、样式、代码逻辑。注册组件分为两种:

  1. 全局组件:在任何其他的组件中都可以使用的组件。
  2. 局部组件:只有在注册的组件中才能使用的组件。

注册全局组件:

全局组件需要使用全局创建的 app 来注册,通过 app.component() 方法传入组件名称、组件对象即可注册一个全局组件。

<div id="app"><!-- 使用全局组件 --><product-item></product-item>
</div><script>const app = Vue.createApp()// 创建组件对象const productItem = {template: '<div>我是一个组件</div>'}// 注册全局组件app.component('product-item', productItem)app.mount('#app')
</script>

组件的 template 模板还有另外一种写法。

<!-- 编写组件模板 -->
<template id="product-item-template"><div>我是一个组件</div>
</template><div id="app"><product-item></product-item>
</div><script>
const app = Vue.createApp()const productItem = {// 使用组件模板template: '#product-item-template'
}
app.component('product-item', productItem)app.mount('#app')
</script>

相关文章:

《Vue3 四》Vue 的组件化

组件化&#xff1a;将一个页面拆分成一个个小的功能模块&#xff0c;每个功能模块完成自己部分的独立的功能。任何应用都可以被抽象成一棵组件树。 Vue 中的根组件&#xff1a; Vue.createApp() 中传入对象的本质上就是一个组件&#xff0c;称之为根组件&#xff08;APP 组件…...

linux中,mysql数据库分片(分库分表)

1.mysql分库分表:解决单个mysql存储上限问题1.实现方法:存储层面:利用分布式存储解决方案分库分表:拆分库和表到其它服务器2.常用设计思路:垂直分库(库里面的表分开)水平分表(表里面的数据分开)分库:数据库分为多个,每个数据库里面都有表,数据均匀存储分库分表:在分的每库里面,…...

springboot503基于Sringboot+Vue个人驾校预约管理系统(论文+源码)_kaic

摘 要 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装个人驾校预约管理系统软件来发挥其高效地信息处理的作用&am…...

Docker应用-项目部署及DockerCompose

文章目录 Docker应用-项目部署1. 项目部署-后端1.1 修改配置1.2 项目打包1.3 编写Dockerfile1.4 创建镜像1.5 创建并运行容器1.6 测试 2. 项目部署-前端2.1 html前端静态目录2.2 nginx.config编写2.3 部署宿主机服务器2.4 创建容器并挂载2.5 测试 3. DockerCompose3.1 基本语法…...

从0入门自主空中机器人-2-1【无人机硬件框架】

关于本课程&#xff1a; 本次课程是一套面向对自主空中机器人感兴趣的学生、爱好者、相关从业人员的免费课程&#xff0c;包含了从硬件组装、机载电脑环境设置、代码部署、实机实验等全套详细流程&#xff0c;带你从0开始&#xff0c;组装属于自己的自主无人机&#xff0c;并让…...

Kafka高性能设计

高性能设计概述 Kafka高性能是多方面协同的结果&#xff0c;包括集群架构、分布式存储、ISR数据同步及高效利用磁盘和操作系统特性等。主要体现在消息分区、顺序读写、页缓存、零拷贝、消息压缩和分批发送六个方面。 消息分区 存储不受单台服务器限制&#xff0c;能处理更多数据…...

Redis字符串底层结构对数值型的支持常用数据结构和使用场景

字符串底层结构 SDS (Simple Dynamic Strings) 是 Redis 中用于实现字符串类型的一种数据结构。SDS 的设计目标是提供高效、灵活的字符串操作&#xff0c;同时避免传统 C 字符串的一些缺点。 struct sdshdr {int len; // 已使用的长度int free; // 未使用的长度char bu…...

uniapp 微信小程序 数据空白展示组件

效果图 html <template><view class"nodata"><view class""><image class"nodataimg":src"$publicfun.locaAndHttp()?localUrl:$publicfun.httpUrlImg(httUrl)"mode"aspectFit"></image>&l…...

在vscode的ESP-IDF中使用自定义组件

以hello-world为例&#xff0c;演示步骤和注意事项 1、新建ESP-IDF项目 选择模板 从hello-world模板创建 2、打开项目 3、编译结果没错 正在执行任务: /home/azhu/.espressif/python_env/idf5.1_py3.10_env/bin/python /home/azhu/esp/v5.1/esp-idf/tools/idf_size.py /home…...

目标检测,语义分割标注工具--labelimg labelme

1 labelimg labelimg可以用来标注目标检测的数据集&#xff0c; 提供多种格式的输出&#xff0c; 如Pascal Voc, YOLO等。 1.1 安装 pip install labelimg1.2 使用 命令行直接输入labelimg即可打开软件主界面进行操作。 使用非常简单&#xff0c; 不做过细的介绍&#xff0…...

发明专利与实用新型专利申请过程及自助与代办方式对比

申请专利&#xff08;发明专利、实用新型专利、外观设计专利&#xff09;有两种方式&#xff1a;1、自己直接向国家知识产权局申请。2、通过专利代办处申请。以下是对这两种专利类型&#xff08;发明专利、实用新型专利&#xff09;申请过程及两种申请方式的详细介绍和对比,参考…...

Datawhale AI冬令营(第二期)动手学AI Agent task2--学Prompt工程,优化Agent效果

目录 如何写好Prompt&#xff1f; 工具包神器1&#xff1a;Prompt框架——CO-STAR 框架 工具包神器2&#xff1a;Prompt结构优化 工具包神器3&#xff1a;引入案例 案例&#xff1a;构建虚拟女友小冰 1. 按照 CO-STAR框架 梳理目标 2. 撰写Prompt 3. 制作对话生成应用&…...

基于python对网页进行爬虫简单教程

python对网页进行爬虫 基于BeautifulSoup的爬虫—源码 """ 基于BeautifulSoup的爬虫###?一、BeautifulSoup简介1.?Beautiful?Soup提供一些简单的、python式的函数用来处理导航、搜索、修改分析树等功能。它是一个工具箱&#xff0c;通过解析文档为用户提供…...

【JavaEE进阶】@RequestMapping注解

目录 &#x1f4d5;前言 &#x1f334;项目准备 &#x1f332;建立连接 &#x1f6a9;RequestMapping注解 &#x1f6a9;RequestMapping 注解介绍 &#x1f384;RequestMapping是GET还是POST请求&#xff1f; &#x1f6a9;通过Fiddler查看 &#x1f6a9;Postman查看 …...

【WebAR-图像跟踪】在Unity中基于Imagine WebAR实现AR图像识别

写在前面的话 感慨一下&#xff0c; WebXR的发展是真的快&#xff0c;20年的时候&#xff0c;大多都在用AR.js做WebAR。随着WebXR标准发展&#xff0c;现在诸如Threejs、AFrame、Unity等多个平台都支持里WebXR。 本文将介绍在Unity中使用 Image Tracker实现Web端的AR图像识别功…...

向bash shell脚本传参

例子&#xff1a; ~ script % touch parameter.sh ~ script % chmod 755 parameter.sh ~ % vim parameter.shparameter.sh: #!/usr/bin/env bashecho the name of current script is $0echo the first parameter is $1echo the second parameter is $2echo all parameters: $…...

Oracle中listagg与wm_concat函数的区别

Oracle中listagg与wm_concat都可以用于将多行数据合并成一个字符串的两个函数&#xff0c;区别如下&#xff1a; 1、分隔符&#xff1a;listagg支持指定分隔符&#xff0c;wm_concat默认为"&#xff0c;"不支持指定&#xff1b; 2、排序&#xff1a;listagg支持排序后…...

热更新与资源管理

热更新、资源管理、打包发布是 Unity 游戏开发中关键的技术点。这些功能可以极大地提高项目的灵活性和资源利用效率&#xff0c;尤其是在多平台、长生命周期的游戏项目中。以下从技术概述、知识点分析、实现方法和代码举例逐一进行详细分析。 一、热更新 热更新指在不重新发布…...

Momentum Provably Improves Error Feedback!

以下是您提供的论文摘要的翻译&#xff1a; **摘要** 由于在分布式环境中训练机器学习模型时通信开销较高&#xff0c;现代算法不可避免地依赖于有损通信压缩。然而&#xff0c;如果不加以处理&#xff0c;压缩造成的错误会传播&#xff0c;并可能导致严重的不稳定行为&#…...

Elasticsearch-脚本查询

脚本查询 概念 Scripting是Elasticsearch支持的一种专门用于复杂场景下支持自定义编程的强大的脚本功能&#xff0c;ES支持多种脚本语言&#xff0c;如painless&#xff0c;其语法类似于Java,也有注释、关键字、类型、变量、函数等&#xff0c;其就要相对于其他脚本高出几倍的性…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...