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

08-Vue基础之组件

news 2026/1/12 0:02:13

个人名片：
😊作者简介：一名大二在校生
🤡 个人主页：坠入暮云间x
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡

文章目录

    • 什么是Vue组件？
    • 组件的组成部分
    • 全局组件
    • 局部组件
      • 1.vue组件命名规范
      • 2.vue项目文件

今天的学习内容是vue的组件，让我们一起看下去吧！
不会安装VUE和配置的可以看这篇文章，up主写的很详细，也很适合新手
Vue安装与配置入门教程(非常详细)

什么是Vue组件？

在vue中，组件是可复用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。组件可大大提高了代码的复用率。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
![在这里插入图片描述](https://img-blog.csdnimg.cn/b4b7c6600add4050bd20de9a5162fccc.png

组件的组成部分

每个.vue组件都分为三个组成部分：

  • template：组件的模版结构
  • script：组件的JavaScript行为
  • style：组件的样式
    template模板结构中应该只能包含一个根元素，因此若有多个应包含在一个大div中。

全局组件

顾名思义就是所有实例都可以进行使用的组件
注册全局组件语法：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 全局组件</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><runoob></runoob>
</div><script>
// 注册
Vue.component('runoob', {template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({el: '#app'
})
</script>
</body>
</html>

局部组件

顾名思义就是只有小部分实例可以使用的组件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部组件</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><runoob></runoob>
</div><script>
var Child = {template: '<h1>自定义局部组件!</h1>'
}// 创建根实例
new Vue({el: '#app',components: {// <runoob> 将只在父模板可用'runoob': Child}
})
</script>
</body>
</html>

1.vue组件命名规范

  1. 项目文件命名每个首字母大写
  2. 使用驼峰命名法
  3. 要做到见名知意

2.vue项目文件

在这里插入图片描述

相关文章：

08-Vue基础之组件

个人名片&#xff1a; &#x1f60a;作者简介&#xff1a;一名大二在校生 &#x1f921; 个人主页&#xff1a;坠入暮云间x &#x1f43c;座右铭&#xff1a;懒惰受到的惩罚不仅仅是自己的失败&#xff0c;还有别人的成功。 &#x1f385;**学习目标: 坚持每一次的学习打卡 文章…...

编程日记 2023/8/31 10:56:20

Kotlin学习之密封类

Kotlin中的密封类: kotlin中的密封类&#xff0c;用关键词Sealed修饰&#xff0c;且还有一个规定&#xff1a;Sealed类的子类应该是Sealed类的嵌套类&#xff0c;或者应该在与Sealed类相同的文件中声明。 当我们想定义一个有相同父类&#xff0c;但是有不同子类的时候&#xf…...

编程日记 2023/8/31 10:55:19

opencv鼠标事件函数setMouseCallback()详解

文章目录 opencv鼠标事件函数setMouseCallback()详解1、鼠标事件函数&#xff1a;&#xff08;1&#xff09;鼠标事件函数原型&#xff1a;setMouseCallback()&#xff0c;此函数会在调用之后不断查询回调函数onMouse()&#xff0c;直到窗口销毁&#xff08;2&#xff09;回调函…...

编程日记 2023/8/31 10:54:18

硬件知识积累 USB 接口 type - A type - B type - C 的介绍与功能说明 （简单介绍）

1. USB 的介绍 1.1 USB 的定义 USB : 通用串行总线(英语: Universal Serial Bus&#xff0c;缩写:USB)是一种串口总线标准&#xff0c;也是一种输入输出接口的技术规范&#xff0c;被广泛地应用于个人电脑和移动设备等信息通讯产品&#xff0c;并扩展至摄影器材、数字电视&a…...

编程日记 2023/8/31 10:53:17

【LeetCode】290. 单词规律

这里写自定义目录标题 2023-8-30 09:34:23 290. 单词规律 2023-8-30 09:34:23 这道题目&#xff0c;我是根据 205. 同构字符串 的思路一样&#xff0c;都转化为另外一个第三方的字符串&#xff0c;在比较翻译过后的语句是不是一样的。 class Solution {public boolean wordP…...

编程日记 2023/8/31 10:52:16

研磨设计模式day12迭代器模式

目录 场景 解决方案 解决思路 代码示例 代码改造 Java实现迭代器 迭代器模式的优点 思考 何时选用 场景 大公司收购了一个小公司&#xff0c;大公司的工资系统采用List来记录工资列表&#xff0c;而小公司是采用数组&#xff0c;老板希望通过决策辅助系统来统一查看…...

编程日记 2023/8/31 10:51:14

Python3不支持sqlite3的解决方法

先贴报错&#xff1a; >>> import sqlite3 Traceback (most recent call last):File "<stdin>", line 1, in <module>File "/usr/local/lib/python3.10/sqlite3/__init__.py", line 57, in <module>from sqlite3.dbapi2 impor…...

编程日记 2023/8/31 10:50:12

Qt应用开发(基础篇)——消息对话框 QMessageBox

一、前言 QMessageBox类继承于QDialog&#xff0c;是一个模式对话框&#xff0c;常用于通知用户或向用户提出问题并接收答案。 对话框QDialog QMessageBox消息框主要由四部分组成&#xff0c;一个主要文本text&#xff0c;用于提醒用户注意某种情况;一个信息文本informativeTex…...

编程日记 2023/8/31 10:49:11

ETC reset

ETC重新激活 换前挡风玻璃膜会把ETC设备拿下来&#xff0c;需要到【ETC服务中心】重新【粘上去】&#xff0c;另外需要工作人员用手持终端【重新激活】 ETC 背面有个 【白色】开关小柱子&#xff0c;一旦拆下来就失效&#xff0c;因为这个开关弹出来了 截面图看就是这样的&…...

编程日记 2023/8/31 10:48:09

2023年8月30日-[SWPUCTF 2021 新生赛]jicao

<?php highlight_file(index.php); include("flag.php"); $id$_POST[id]; $jsonjson_decode($_GET[json],true); if ($id"wllmNB"&&$json[x]"wllm") {echo $flag;} ?> 包含了flag.php文件&#xff0c;设定了一个POST请求的id和…...

编程日记 2023/8/31 10:47:08

MariaDB数据库服务器

目录 一、什么是数据库&#xff1f; 二、什么是关系型数据库&#xff1f; 三、数据库字符集和排序规则是什么&#xff1f; 四、常用数据类型 五、Mariadb数据库相关配置案例 一、什么是数据库&#xff1f; 数据库&#xff08;DB&#xff09;是以一定方式长期存储在计算机硬盘内…...

编程日记 2023/8/31 10:46:07

Nat. Mach. Intell 2023 | DrugBAN+：域自适应的可解释双线性插值网络改进药物-靶标预测(DTI)

DrugBAN&#xff1a;Interpretable bilinear attention network with domain adaptation improves drug–target prediction 论文&#xff1a;Interpretable bilinear attention network with domain adaptation improves drug–target prediction | Nature Machine Intellige…...

编程日记 2023/8/31 10:45:06

org.springframework.web.reactive.function.server.ServerResponse设置响应头

记录一下 String host serverRequest.uri().getHost();Consumer<HttpHeaders> headersConsumer consumer -> {consumer.setAccessControlAllowOrigin(host);consumer.setAccessControlAllowCredentials(true);consumer.set("Access-Control-Allow-Headers"…...

编程日记 2023/8/31 10:44:04

高频面试题：如何分别用三种姿势实现三个线程交替打印0到100

最近面试遇到的一道题&#xff0c;需要三个线程交替打印0-100&#xff0c;当时对多线程并不是很熟悉因此没怎么写出来&#xff0c;网上搜了之后得到现 synchronized wait/notifyAll 实现思路&#xff1a;判断当前打印数字和线程数的取余&#xff0c;不等于当前线程则处于等待…...

编程日记 2023/8/31 10:43:01

【git】Idea撤回本地分支、或远程分支提交记录的各种实际场景操作步骤

文章目录 idea撤回本地分支、远程分支场景操作集合场景1&#xff1a;要撤回最后一次本地分支的提交实现效果&#xff1a;操作步骤&#xff1a; 场景2&#xff1a;要撤回最后一次远程分支的提交有撤销记录的&#xff1a;实现效果&#xff1a;操作步骤&#xff1a; 无撤销记录的&…...

编程日记 2023/8/31 10:41:59

FPGA SPI 驱动程序

1.引言 此驱动程序已经完成很久了&#xff0c;花了2个星期的时间&#xff0c;主要是提升程序运行的效率。最近整理文件的时候又看到了&#xff0c;记录一下。 2.程序框架分解 module adc7254_Ctrl(input sys_clk, //system clkc 50Minput re…...

编程日记 2023/8/31 10:40:58

【实战】十一、看板页面及任务组页面开发（五） —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（二十七）

文章目录 一、项目起航&#xff1a;项目初始化与配置二、React 与 Hook 应用&#xff1a;实现项目列表三、TS 应用&#xff1a;JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook&…...

编程日记 2023/8/31 10:39:57

mac m1 docker 安装kafka和zookeeper

获取本地ip地址 ifconfig en0 192.168.0.105. 下面的ip都会使用到 1、拉取镜像 docker pull wurstmeister/zookeeper docker pull wurstmeister/kafka 2、启动容器 启动 zookeeper docker run -d --name zookeeper -p 2181:2181 映射 3、 启动 kafka 注意&#xff…...

编程日记 2023/8/31 10:38:55

宏观经济和风电预测误差分析（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/8/31 10:37:54

GO学习之 搜索引擎(ElasticSearch)

GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 7、GO学习之 多线程(goroutine) 8、GO学习之 函数(Function) 9、GO学习之 接口(Interface) 10、GO学习之 网络通信(Net/Htt…...

编程日记 2023/8/31 10:36:52

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2026/1/8 15:19:06

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2026/1/10 10:57:39

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2026/1/10 5:15:32

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/6 15:32:05

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/8 6:04:33

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2026/1/7 0:28:59

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2026/1/10 15:18:47