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

08-Vue基础之组件

news 2025/9/14 22:09: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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/9/14 9:52:18

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2025/9/9 10:11:52

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/9/14 12:35:19

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/6/16 8:33:33

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

编程新知 2025/9/14 21:52:05

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2025/9/4 9:53:24

【JVM】Java虚拟机（二）——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

编程新知 2025/9/2 17:48:56

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30

渗透实战PortSwigger靶场：lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...

编程新知 2025/9/2 16:50:58

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

编程新知 2025/9/9 10:07:48