当前位置: 首页 > 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. 局部组件:只有在注册的组件中才能使用的组件。

只要注册了全局组件,即使代码中没有用到,Webpack 等打包工具依然会对其进行打包;局部组件如果没有用到,将不会对其进行打包。

注册全局组件:

全局组件需要使用全局创建的 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>

注册局部组件:

局部组件通过 components 属性选项来进行注册,该选项对应的是一个对象,对象中的键值对是 组件名称:组件对象

<div id="app"><!-- 使用局部组件 --><product-item></product-item>
</div><script>// 创建组件对象const productItem = {template: '<div>我是一个组件</div>'}const app = Vue.createApp({// 注册局部组件components: {'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({components: {'product-item': {// 注册组件模板template: '#product-item-template',}}
})app.mount('#app')
</script>

定义组件名称的方式:

定义组件名称的方式有两种:

  1. 使用 kebab-case 短横线分隔符。
    // 使用
    <product-item></product-item>// 定义
    app.component('product-item', productItem)
    
  2. 使用 PascalCase 大驼峰标识符。
    // 使用。在原生 HTML 文件中这么写是无效的,因为 HTML 不区分大小写;不过在 Vue 文件中就没有这个问题了
    <productItem></productItem>// 定义
    app.component('productItem', productItem)
    

相关文章:

《Vue3 四》Vue 的组件化

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

Linux:alias别名永久有效

一、背景 日常使用bash时候&#xff0c;有些常用的命令参数的组合命令太长&#xff0c;很难记&#xff0c;此时可以利用Linux提供的alias命令生成命令的别名&#xff08;命令的隐射&#xff09;&#xff0c;但是我们会发现&#xff0c;当退出了终端后重新登录就失效了&#xff…...

MicroDiffusion——采用新的掩码方法和改进的 Transformer 架构,实现了低预算的扩散模型

介绍 论文地址&#xff1a;https://arxiv.org/abs/2407.15811 现代图像生成模型擅长创建自然、高质量的内容&#xff0c;每年生成的图像超过十亿幅。然而&#xff0c;从头开始训练这些模型极其昂贵和耗时。文本到图像&#xff08;T2I&#xff09;扩散模型降低了部分计算成本&a…...

网神SecFox FastJson反序列化RCE漏洞复现(附脚本)

0x01 产品描述&#xff1a; ‌网神SecFox是奇安信网神信息技术(北京)股份有限公司推出的一款运维安全管理与审计系统‌&#xff0c;集“身份认证、账户管理、权限控制、运维审计”于一体&#xff0c;提供统一运维身份认证、细粒度的权限控制、丰富的运维审计报告、多维度的预警…...

解决无法在 Ubuntu 24.04 上运行 AppImage 应用

在 Ubuntu 24.04 中运行 AppImage 应用的完整指南 在 Ubuntu 24.04 中&#xff0c;许多用户可能会遇到 AppImage 应用无法启动的问题。即使你已经设置了正确的文件权限&#xff0c;AppImage 仍然拒绝运行。这通常是由于缺少必要的库文件所致。 问题根源&#xff1a;缺少 FUSE…...

Pytorch | 利用PC-I-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击

Pytorch | 利用PC-I-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击 CIFAR数据集PC-I-FGSM介绍算法原理 PC-I-FGSM代码实现PC-I-FGSM算法实现攻击效果 代码汇总pcifgsm.pytrain.pyadvtest.py 之前已经针对CIFAR10训练了多种分类器&#xff1a; Pytorch | 从零构建AlexNet对CIFAR…...

前端往后端传递参数的方式有哪些?

文章目录 1. URL 参数1.1. 查询参数&#xff08;Query Parameters)1.2. 路径参数&#xff08;Path Parameters&#xff09; 2. 请求体&#xff08;Request Body&#xff09;2.1. JSON 数据2.2. 表单数据2.3. 文件上传 3. 请求头&#xff08;Headers&#xff09;3.1. 自定义请求…...

对抗攻击VA-I-FGSM:Adversarial Examples with Virtual Step and Auxiliary Gradients

文章目录 摘要相关定义算法流程代码:文章链接: Improving Transferability of Adversarial Examples with Virtual Step and Auxiliary Gradients 摘要 深度神经网络已被证明容易受到对抗样本的攻击,这些对抗样本通过向良性样本中添加人类难以察觉的扰动来欺骗神经网络。目…...

【Java】IO流练习

IO流练习 题干&#xff1a; 根据指定要求&#xff0c;完成电话记录、 注册、登录 注册 题干&#xff1a; 完成【注册】功能&#xff1a; 要求&#xff1a; 用户输入用户名、密码存入users.txt文件中 若users.txt文件不存在&#xff0c;创建该文件若users.txt文件存在 输入…...

红魔电竞PadPro平板解BL+ROOT权限-KernelSU+LSPosed框架支持

红魔Padpro设备目前官方未开放解锁BL&#xff0c;也阉割了很多解锁BL指令&#xff0c;造成大家都不能自主玩机。此规则从红魔8开始&#xff0c;就一直延续下来&#xff0c;后续的机型大概率也是一样的情况。好在依旧有开发者进行适配研究&#xff0c;目前红魔PadPro平板&#x…...

小程序配置文件 —— 12 全局配置 - pages配置

全局配置 - pages配置 在根目录下的 app.json 文件中有一个 pages 字段&#xff0c;这里我们介绍一下 pages 字段的具体用法&#xff1b; pages 字段&#xff1a;用来指定小程序由哪些页面组成&#xff0c;用来让小程序知道由哪些页面组成以及页面定义在哪个目录&#xff0c;…...

供应链系统设计-供应链中台系统设计(六)- 商品中心概念篇

概述 我们在供应链系统设计-中台系统设计系列&#xff08;五&#xff09;- 供应链中台实践概述 中描述了什么是供应链中台&#xff0c;供应链中台主要包含了那些组成部门。包括业务中台、通用中台等概念。为了后续方便大家对于中台有更深入的理解&#xff0c;我会逐一针对中台…...

leetcode 面试经典 150 题:删除有序数组中的重复项

链接删除有序数组中的重复项题序号26题型数组解题方法双指针难度简单熟练度✅✅✅✅✅ 题目 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保…...

Python 中的 lambda 函数和嵌套函数

Python 中的 lambda 函数和嵌套函数 Python 中的 lambda 函数和嵌套函数Python 中的 lambda 函数嵌套函数&#xff08;内部函数&#xff09;封装辅助函数闭包和工厂函数 Python 中的 lambda 函数和嵌套函数 Python 中的 lambda 函数 Lambda 函数是基于单行表达式的匿名函数。…...

Android笔试面试题AI答之Android基础(7)

Android入门请看《Android应用开发项目式教程》&#xff0c;视频、源码、答疑&#xff0c;手把手教 文章目录 1.Android开发如何提高App的兼容性&#xff1f;**1. 支持多版本 Android 系统****2. 适配不同屏幕尺寸和分辨率****3. 处理不同硬件配置****4. 适配不同语言和地区**…...

PhPMyadmin-cms漏洞复现

一.通过日志文件拿Shell 打开靶场连接数据库 来到sql中输入 show global variables like %general%; set global general_logon; //⽇志保存状态开启&#xff1b; set global general_log_file D:/phpstudy/phpstudy_pro/WWW/123.php //修改日志保存位置 show global varia…...

HTML-CSS(day01)

W3C标准&#xff1a; W3C&#xff08; World Wide Web Consortium&#xff0c;万维网联盟&#xff09; W3C是万维网联盟&#xff0c;这个组成是用来定义标准的。他们规定了一个网页是由三部分组成&#xff0c;分别是&#xff1a; 三个组成部分&#xff1a;&#xff08;1&…...

【服务器项目部署】⭐️将本地项目部署到服务器!

目录 &#x1f378;前言 &#x1f37b;一、服务器选择 &#x1f379; 二、服务器环境部署 2.1 java 环境部署 2.2 mysql 环境部署 &#x1f378;三、项目部署 3.1 静态页面调整 3.2 服务器端口开放 3.3 项目部署 ​ &#x1f379;四、测试 &#x1f378;前言 小伙伴们大家好…...

计算机网络 (14)数字传输系统

一、定义与原理 数字传输系统&#xff0c;顾名思义&#xff0c;是一种将连续变化的模拟信号转换为离散的数字信号&#xff0c;并通过适当的传输媒介进行传递的系统。在数字传输系统中&#xff0c;信息被编码成一系列的二进制数字&#xff0c;即0和1&#xff0c;这些数字序列能够…...

机器学习周报-TCN文献阅读

文章目录 摘要Abstract 1 TCN通用架构1.1 序列建模任务描述1.2 因果卷积&#xff08;Causal Convolutions&#xff09;1.3 扩张卷积&#xff08;Dilated Convolutions&#xff09;1.4 残差连接&#xff08;Residual Connections&#xff09; 2 TCN vs RNN3 TCN缺点4 代码4.1 TC…...

UniApp 页面布局基础

一、UniApp 页面布局简介 在当今的移动应用开发领域&#xff0c;跨平台开发已成为一种主流趋势。UniApp作为一款极具影响力的跨平台开发框架&#xff0c;凭借其“一套代码&#xff0c;多端运行”的特性&#xff0c;为开发者们提供了极大的便利&#xff0c;显著提升了开发效率。…...

最新的强大的文生视频模型Pyramid Flow 论文阅读及复现

《PYRAMIDAL FLOW MATCHING FOR EFFICIENT VIDEO GENERATIVE MODELING》 论文地址&#xff1a;2410.05954https://arxiv.org/pdf/2410.05954 项目地址&#xff1a; jy0205/Pyramid-Flow&#xff1a; 用于高效视频生成建模的金字塔流匹配代码https://github.com/jy0205/Pyram…...

论文阅读 - 《Large Language Models Are Zero-Shot Time Series Forecasters》

Abstract 通过将时间序列编码为数字组成的字符串&#xff0c;我们可以将时间序列预测当做文本中下一个 token预测的框架。通过开发这种方法&#xff0c;我们发现像GPT-3和LLaMA-2这样的大语言模型在下游任务上可以有零样本时间序列外推能力上持平或者超过专门设计的时间序列训…...

STM32文件详解

STM32文件详解 启动文件打开MDK栈空间开辟堆空间开辟中断向量表复位程序对于 weak 的理解对于_main 函数的分析中断程序堆栈初始化系统启动流程 时钟树时钟源时钟配置函数时钟初始化配置函数 启动文件 启动文件的方式 1、初始化堆栈指针 SP _initial_sp 2、初始化程序计数器指…...

【Spring】详解(上)

Spring 框架核心原理与应用&#xff08;上&#xff09; 一、Spring 框架概述 &#xff08;一&#xff09;诞生背景 随着 Java 应用程序规模的不断扩大以及复杂度的日益提升&#xff0c;传统的 Java开发方式在对象管理、代码耦合度等方面面临诸多挑战。例如&#xff0c;对象之…...

大数据面试笔试宝典之Flink面试

1.Flink 是如何支持批流一体的? F link 通过一个底层引擎同时支持流处理和批处理. 在流处理引擎之上,F link 有以下机制: 1)检查点机制和状态机制:用于实现容错、有状态的处理; 2)水印机制:用于实现事件时钟; 3)窗口和触发器:用于限制计算范围,并定义呈现结果的…...

Rust编程与项目实战-箱

【图书介绍】《Rust编程与项目实战》-CSDN博客 《Rust编程与项目实战》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 (jd.com) Rust编程与项目实战_夏天又到了的博客-CSDN博客 对于Rust而言&#xff0c;箱&#xff08;crate&#xff09;是一个独立的可编译单元&…...

git回退指定版本/复制提交id

1.使用“git reset --hard 目标版本号”命令将版本回退2.使用“git push -f”提交更改 因为我们回退后的本地库HEAD指向的版本比远程库的要旧&#xff0c;此时如果用“git push”会报错。 改为使用 git push -f 即可完成回退后的提交。...

数据库锁的深入探讨

数据库锁&#xff08;Database Lock&#xff09;是多用户环境中用于保证数据一致性和隔离性的机制。随着数据库系统的发展&#xff0c;特别是在高并发的场景下&#xff0c;锁的机制变得尤为重要。通过使用锁&#xff0c;数据库能够防止并发操作导致的数据冲突或不一致。本文将深…...

《机器学习》——KNN算法

文章目录 KNN算法简介KNN算法——sklearnsklearn是什么&#xff1f;sklearn 安装sklearn 用法 KNN算法 ——距离公式KNN算法——实例分类问题完整代码——分类问题 回归问题完整代码 ——回归问题 KNN算法简介 一、KNN介绍 全称是k-nearest neighbors&#xff0c;通过寻找k个距…...

iOS开发代码块-OC版

iOS开发代码块-OC版 资源分享资源使用详情Xcode自带代码块自定义代码块 资源分享 自提&#xff1a; 通过网盘分享的文件&#xff1a;CodeSnippets 2.zip 链接: https://pan.baidu.com/s/1Yh8q9PbyeNpuYpasG4IiVg?pwddn1i 提取码: dn1i Xcode中的代码片段默认放在下面的目录中…...

关于在M系列的Mac中使用SoftEtherClient软件

1. 前言 本文说明的是在M系列的苹果的MacBook中如何使用SoftetherClient这款软件&#xff0c;是直接在MacOS操作系统中安装连接使用&#xff0c;不是在PD环境或者非ARM架构的Mac中安装使用。 PS&#xff1a;别费劲百度了&#xff0c;很少有相关解决方案的&#xff0c;在国内会…...

【畅购商城】详情页模块之评论

目录 接口 分析 后端实现&#xff1a;JavaBean 后端实现 前端实现 接口 GET http://localhost:10010/web-service/comments/spu/2?current1&size2 { "code": 20000, "message": "查询成功", "data": { "impressions&q…...

机器学习DAY4续:梯度提升与 XGBoost (完)

本文将通过 XGBoost 框架来实现回归、分类和排序任务&#xff0c;帮助理解和掌握使用 XGBoost 解决实际问题的能力。我们将从基本的数据处理开始&#xff0c;逐步深入到模型训练、评估以及预测。最后&#xff0c;将模型进行保存和加载训练好的模型。 知识点 回归任务分类任务…...

Maven 测试和单元测试介绍

一、测试介绍 二、单元测试 1&#xff09;介绍 2&#xff09;快速入门 添加依赖 <dependencies><!-- junit依赖 --><dependency><groupId>org.junit.jupiter</groupId><artifactId>junit-jupiter</artifactId><version>5.9…...

LeetCode7. 整数反转

难度&#xff1a;中等 给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [−231, 231 − 1] &#xff0c;就返回 0。 假设环境不允许存储 64 位整数&#xff08;有符号或无符号&#xff09;。 示…...

Java编程题_面向对象和常用API01_B级

Java编程题_面向对象和常用API01_B级 第1题 面向对象、异常、集合、IO 题干: 请编写程序&#xff0c;完成键盘录入学生信息&#xff0c;并计算总分将学生信息与总分一同写入文本文件 需求&#xff1a;键盘录入3个学生信息(姓名,语文成绩,数学成绩) 求出每个学生的总分 ,并…...

WEB攻防-通用漏洞-文件上传-js验证-MIME验证-user.ini-语言特征

目录 定义 1.前端验证 2.MIME验证 3.htaccess文件和.user. ini 4.对内容进行了过滤&#xff0c;做了内容检测 5.[ ]符号过滤 6.内容检测php [] {} ; 7.()也被过滤了 8.反引号也被过滤 9.文件头检测 定义 文件上传漏洞是指攻击者上传了一个可执行文件&#xff08;如木马…...

ubuntu20.04 调试bcache源码

搭建单步调试bcache的环境&#xff0c;/dev/sdb作为backing dev&#xff0c; /dev/sdc作为cache dev。 一、宿主机环境 1&#xff09;安装ubuntu 20.04 &#xff1a; 参考ubuntu20.04 搭建kernel调试环境第一篇--安装系统_ubuntu kernel-CSDN博客安装&#xff0c;其中的第六…...

全国青少年信息学奥林匹克竞赛(信奥赛)备考实战之循环结构(for循环语句)(四)

实战训练1—最大差值 问题描述&#xff1a; 输入n个非负整数&#xff0c;找出这个n整数的最大值与最小值&#xff0c;并求最大值和最小值的差值。 输入格式&#xff1a; 共两行&#xff0c;第一行为整数的个数 n&#xff08;1≤n≤1000)。第二行为n个整数的值&#xff08;整…...

基于深度学习(HyperLPR3框架)的中文车牌识别系统-python程序开发测试

本篇内容为python开发&#xff0c;通过一个python程序&#xff0c;测试搭建的开发环境&#xff0c;读入一张带有车牌号的图片&#xff0c;成功识别出车牌号。 1、通过PyCharm新建一个工程&#xff0c;如&#xff1a;PlateRecognition&#xff0c;配置虚拟环境。 2、在工程中新…...

【SpringMVC】拦截器

拦截器&#xff08;Interceptor&#xff09;是一种用于动态拦截方法调用的机制。在 Spring MVC 中&#xff0c;拦截器能够动态地拦截控制器方法的执行过程。以下是请求发送与接收的基本流程&#xff1a; 当浏览器发出请求时&#xff0c;请求首先到达 Tomcat 服务器。Tomcat 根…...

离线的方式:往Maven的本地仓库里安装依赖

jar文件及源码的绝对路径&#xff0c;gav坐标&#xff0c;打包方式&#xff0c;Maven本地仓库的路径 mvn install:install-file ^-DfileD:\hello-spring-boot-starter-1.0-SNAPSHOT.jar ^-DsourcesD:\hello-spring-boot-starter-1.0-SNAPSHOT-sources.jar ^-DgroupIdcom.examp…...

短视频矩阵系统后端源码搭建实战与技术详解,支持OEM

一、引言 随着短视频行业的蓬勃发展&#xff0c;短视频矩阵系统成为了众多企业和创作者进行多平台内容运营的有力工具。后端作为整个系统的核心支撑&#xff0c;负责处理复杂的业务逻辑、数据存储与交互&#xff0c;其搭建的质量直接影响着系统的性能、稳定性和可扩展性。本文将…...

ArcGIS Pro地形图四至角图经纬度标注与格网标注

今天来看看ArcGIS Pro 如何在地形图上设置四至角点的经纬度。方里网标注。如下图的地形图左下角经纬度标注。 如下图方里网的标注 如下为本期要介绍的例图&#xff0c;如下&#xff1a; 图片可点击放大 接下来我们来介绍一下 推荐学习&#xff1a;GIS入门模型构建器Arcpy批量…...

鸿蒙Next状态管理V2 - @Once初始化用法总结

一、概述 Once装饰器用于实现变量仅在初始化时同步一次外部传入值&#xff0c;后续数据源更改时不会将修改同步给子组件。其必须搭配Param使用&#xff0c;且不影响Param的观测能力&#xff0c;仅拦截数据源变化&#xff0c;与Param装饰变量的先后顺序不影响实际功能&#xff…...

全新免押租赁系统助力商品流通高效安全

内容概要 全新免押租赁系统的推出&#xff0c;可以说是一场商品流通领域的小革命。想象一下&#xff0c;不再为押金烦恼&#xff0c;用户只需通过一个简单的信用评估&#xff0c;就能快速租到所需商品&#xff0c;这种体验简直令人惊喜&#xff01;这个系统利用代扣支付技术&a…...

VUE前端实现防抖节流 Lodash

方法一&#xff1a;采用Lodash工具库 Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。 &#xff08;1&#xff09;采用终端导入Lodash库 $ npm i -g npm $ npm i --save lodash &#xff08;2&#xff09;应用 示例&#xff1a;搜索框输入防抖 在这个示例…...

Redisson 框架详解

目录 一.为什么要使用分布式锁&#xff1f; 二.Redisson 的基本使用&#xff1a; 1.添加 Redisson 依赖&#xff1a; 2.在 application.yml 配置 Redis&#xff1a; 3. 创建 Redisson 客户端&#xff1a; &#xff08;1&#xff09;单节点模式&#xff1a; &#xff08;…...

WebSocket 入门详解

开发领域&#xff1a;前端开发 | AI 应用 | Web3D | 元宇宙 技术栈&#xff1a;JavaScript、React、Three.js、WebGL、Go 经验经验&#xff1a;6年 前端开发经验&#xff0c;专注于图形渲染和AI技术 开源项目&#xff1a;智简未来 晓智元宇宙、数字孪生引擎 大家好&#xff01;…...