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

08-Vue基础之组件

news 文章来源：https://blog.csdn.net/weixin_46625500/article/details/132584711 2025/5/19 22:43:23

个人名片：
😊作者简介：一名大二在校生
🤡 个人主页：坠入暮云间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

Sentinel —实时监控

Sentinel 提供对所有资源的实时监控。如果需要实时监控&#xff0c;客户端需引入以下依赖&#xff08;以 Maven 为例&#xff09;&#xff1a; <dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-transport-simple-http</artif…...

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

接口优化通用方案

目录 批量异步、回调缓存预取池化并行锁粒度索引大事务海量数据 批量 批量思想&#xff1a;批量操作数据库 优化前&#xff1a; //for循环单笔入库 for(TransDetail detail:transDetailList){ insert(detail); } 优化后&#xff1a; batchInsert(transDetailList); 异步、回…...

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

用Visual Studio 2022的.map文件来查看C++变量在内存中的布局情况

先看几个实例 代码1 #include <iostream> int data_arr[32768]; int main() {data_arr[1] 11;std::cout<<"data_arr[1]: " << data_arr[1] << std::endl;return data_arr[1]; } 上述代码在Win10 X64&#xff0c;MSVC Release模式下编译&…...

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

使用代理突破浏览器IP限制

一、实验目的: 主要时了解代理服务器的概念&#xff0c;同时如何突破浏览器IP限制 二、预备知识&#xff1a; 代理服务器英文全称是Proxy Server&#xff0c;其功能就是代理网络用户去取得网络信息。形象的说&#xff1a;它是网络信息的中转站&#xff0c;特别是它具有一个cac…...

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

HuggingFace中的 Files and versions 如何优雅下载到本地?(Python requests,tqdm)

前言 在使用huggingface把玩各种大模型时&#xff0c;如果选择从远程加载模型&#xff0c;这个过程可能因为网络问题而非常耗时甚至直接失败&#xff0c;所以把模型、分词器等相关文件下载到本地&#xff0c;再直接从本地加载就成了不可回避的流程。 在进入具体版本的模型后&…...

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

三、原型模式

一、什么是原型模式 原型&#xff08;Prototype&#xff09;模式的定义如下&#xff1a;用一个已经创建的实例作为原型&#xff0c;通过复制该原型对象来创建一个和原型相同或相似的新对象。在这里&#xff0c;原型实例指定了要创建的对象的种类。用这种方式创建对象非常高效&a…...

编程日记 2023/8/31 10:30:42

transformer实现词性标注

1、self-attention 1.1、self-attention结构图 上图是 Self-Attention 的结构&#xff0c;在计算的时候需要用到矩阵 Q(查询), K(键值), V(值)。在实际中&#xff0c;Self-Attention 接收的是输入(单词的表示向量 x组成的矩阵 X) 或者上一个 Encoder block 的输出。而 Q, K, V…...

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

Java中异或操作和OTP算法

最近在研究加密算法&#xff0c;发现异或操作在加密算法中用途特别广&#xff0c;也特别好用。下面以Java语言为例&#xff0c;简单记录一下异或操作&#xff0c;以及在算法中的使用&#xff0c;包括常用的OTP算法。 一&#xff0c;异或操作特征 1&#xff0c; 相同出0&#…...

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

K8S最新版本集群部署(v1.28) + 容器引擎Docker部署（下）

温故知新 &#x1f4da;第三章 Kubernetes各组件部署&#x1f4d7;安装kubectl&#xff08;可直接跳转到安装kubeadm章节&#xff0c;直接全部安装了&#xff09;&#x1f4d5;下载kubectl安装包&#x1f4d5;执行kubectl安装&#x1f4d5;验证kubectl &#x1f4d7;安装kubead…...

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

女子垒球运动的发展·垒球1号位

女子垒球运动的发展 1. 女子垒球运动的起源和发展概述 女子垒球运动&#xff0c;诞生于19世纪末的美国&#xff0c;作为棒球运动的衍生品&#xff0c;经过百年的积淀&#xff0c;已在全球范围内广泛传播&#xff0c;形成了丰富的赛事文化。她的起源&#xff0c;可以追溯到19世…...

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