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

Vue单文件组件

news 2026/1/13 10:18:57

一、.vue文件

我们使用Vue的单文件组件的时候，一个.vue文件就是一个组件。

例如我们创建一个School组件：

二、组件的结构

我们编写网页代码的时候有HTML结构、CSS样式、JS交互。

组件里也是同样存在这三种结构的：

<template><div><!-- 模板 --></div>
</template><script>// 交互
</script><style>/* 样式 */
</style>

模板中必须要用一个div标签包住所有的模板，不然会报错。

然后将模板的内容写在template中，Vue的内容写在script中，style正常写样式即可。

<template><div><div>学校名称：{{ name }}</div><div>学校地址：{{ address }}</div><button @click="showHello">点我弹窗</button></div>
</template><script>
export default {name:"School",data() {return {name: "家里蹲大学",address: "家",}},methods: {showHello() {alert("Hello!");},}
};
</script><style>button{background-color: skyblue;}
</style>

这里的VueComponent必须暴露出去外界才能引用到这个组件。

三、App.vue

当我们创建完所有的组件的后，全部都交由App.vue进行统一管理。

先对组件进行引入，然后配置components，最后在模板中使用组件:

<template><div><School/><Student/></div>
</template><script>
import School from './School.vue';
import Student from './Student.vue';export default {name: "App",components: {School,Student}
}
</script>

四、main.js

main.js为入口文件，主要管理App.vue文件。

需要创建Vue实例对象和挂载Vue：

import App from "App.vue";new Vue({el: "#root",template: `<App></App>`,components: {App}
})

五、index.html

配置root根元素和引入入口文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="root"></div><script src="/js/vue.js"></script><script src="/单文件组件/main.js"></script>
</body>
</html>

所以最终文件结构如下：

相关文章：

Vue单文件组件

一、.vue文件 我们使用Vue的单文件组件的时候&#xff0c;一个.vue文件就是一个组件。 例如我们创建一个School组件&#xff1a; 二、组件的结构 我们编写网页代码的时候有HTML结构、CSS样式、JS交互。 组件里也是同样存在这三种结构的&#xff1a; <template><d…...

编程日记 2023/10/24 17:03:06

轻松理解 Transformers（1）：Input部分

编者按&#xff1a;Transformers 是人工智能领域近年来最引人瞩目的技术之一&#xff0c;它为语言生成模型的发展做出了巨大的贡献。随着大语言模型&#xff08;LLM&#xff09;的兴起&#xff0c;公众对其背后的技术原理也越来越感兴趣。但是由于Transformers本身具有一定的复…...

编程日记 2023/10/24 17:02:06

PHP MySQL 交互 笔记/练习

PHP 与 MySQL 交互 交互函数 函数名作用mysqli_connect()与MySQL 数据库建立连接。mysqli_close()关闭与MYSQL 数据库建立的连接。mysqli_connect_errno()与MySQL 数据库建立连接时&#xff0c;发生错误时的错误编号。mysqli_connect_error()与MySQL 数据库建立连接时&#x…...

编程日记 2023/10/24 17:00:04

领域驱动设计：基于DDD的微服务设计实例

文章目录 项目基本信息战略设计战术设计后续的工作 用一个项目来了解 DDD 的战略设计和战术设计&#xff0c;走一遍从领域建模到微服务设计的全过程&#xff0c;一起掌握 DDD 的主要设计流程和关键 点。 项目基本信息 项目的目标是实现在线请假和考勤管理。功能描述如下&…...

编程日记 2023/10/24 16:59:02

【PB续命02】Oracle中加密及编码等

Oracle中实现Md5/Base64/AesBase64/UrlEncode等加密编码的使用备忘&#xff0c;参考其它人的贴子&#xff0c;Oracle 11g 亲测有效。 1. Oracle中实现Md5加密 SELECT lower(MD5(白龙马5217)) FROM dual; --返回结果 72853926982028ab8219921ad2918b8f --或 select utl_raw.…...

编程日记 2023/10/24 16:58:01

STM32-LTC6804方案成熟BMS方案

方案下载链接&#xff01;&#xff01;https://mp.weixin.qq.com/s?__bizMzU2OTc4ODA4OA&mid2247549092&idx1&snc73855c4e3d5afddd8608d8528864f95&chksmfcfb1373cb8c9a65a4bd1f545a1a587af882f209e7ccbb8944f4d2514d241ca1d7fcc4615e10&token539106225&a…...

编程日记 2023/10/24 16:55:58

一步一步认知机器学习

1&#xff0c;前言 之前学习并且实操了一些算法框架用来探索相关方向的可能性&#xff0c;但是总不了解相关的步骤。因为一步一步按照别人给出的步骤去操作&#xff0c;解决一些操作时出现的问题&#xff0c;基本可以达到目的。但是这个也基本限制了在那个框架而已。对于算法还…...

编程日记 2023/10/24 16:54:57

现代C++、STL、QTL的使用

0、现代C中最重要的是&#xff1a; 右值引用&&、移动语义std::move、完美转发std::forward、万能引用T&& void Func(int& x) { cout << "左值引用" << endl; } void Func(const int& x) { cout << "const左值引用…...

编程日记 2023/10/24 16:53:56

Android 备案公钥、签名 MD5获取方法

公钥和 MD5 值可以通过安卓开发工具、Keytool、Jadx-GUI 等多种工具获取&#xff0c;本文以 jadx-gui 为例。 1 windows 下载 jadx-gui 工具 下载 jadx-gui 工具 在这里选择一个下载 下载后 解压文件 双击运行程序&#xff0c;然后选择 release apk安装包 2 Mac 打开终端&a…...

编程日记 2023/10/24 16:52:55

1688拍立淘接口，按图搜索商品接口，图片识别接口，图片上传搜索接口，图片搜索API接口，以图搜货接口

1688拍立淘接口的作用是让用户通过上传图片或输入图片链接的方式&#xff0c;调用1688的图片搜索引擎&#xff0c;返回与该图片相关的所有1688商品。 使用该接口需要先获取一个key和secret&#xff0c;然后参考API文档里的接入方式和示例&#xff0c;查看测试工具是否有需要的…...

编程日记 2023/10/24 16:50:53

H3C AC通过Web平台进行AC软件的升级？

软件升级的流程 1、获取软件版本 登录新华三官网&#xff08;首页>产品支持与服务>文档与软件>软件下载&#xff09;&#xff0c;将指定的软件版本下载至本地。 无线路由器-无线接入点-无线控制器-新华三集团-H3C 官网软件下载公共账号密码&#xff1a;账号&#x…...

编程日记 2023/10/24 16:49:52

网络通信和tcp协议

一、计算机网络架构模型 1、OSI七层模型 2、TCP/IP模型 3、TCP/IP协议族 无论是什么网络模型&#xff0c;都是为上一层提供服务&#xff0c;抽象层建立在低一层提供的服务上&#xff0c;每层都对应不同的协议 4、地址和端口号 1&#xff09;MAC地址 MAC 地址共 48 位&#…...

编程日记 2023/10/24 16:48:50

React 核心与实战2023版

课程亮点： 完整的前后台项目（PC+移动；完成业务；）React 最新企业标准技术栈（React 18 + Redux + ReactRouter + AntD）React + TypeScript （为大型项目奠定了基础）课程内容安排： React 介绍 React 是什么？ React 是由Meta公司研发，是一个用于 构建Web和原生交互界面…...

编程日记 2023/10/24 16:47:47

在 Android 上测试 Kotlin 协程

文章目录 官方文档在测试中调用挂起函数TestDispatchersStandardTestDispatcherUnconfinedTestDispatcher 注入测试调度程序设置主调度程序在测试之外创建调度程序创建您自己的 TestScope注入作用域 官方文档 https://developer.android.google.cn/kotlin/coroutines/test?hl…...

编程日记 2023/10/24 16:46:46

图论04-【无权无向】-图的广度优先遍历BFS

文章目录 1. 代码仓库2. 广度优先遍历图解3.主要代码4. 完整代码 1. 代码仓库 https://github.com/Chufeng-Jiang/Graph-Theory 2. 广度优先遍历图解 3.主要代码 原点入队列原点出队列的同时&#xff0c;将与其相邻的顶点全部入队列下一个顶点出队列出队列的同时&#xff0c;将…...

编程日记 2023/10/24 16:45:45

vue3 v-model的使用

&#x1f642;博主&#xff1a;锅盖哒 &#x1f642;文章核心&#xff1a;vue3 v-model的使用 目录 前言 什么是v-model&#xff1f; 基本的v-model用法 自定义组件中的v-model 前言 当涉及到Vue.js 3的前端开发时&#xff0c;v-model是一个不可或缺的工具&#xff0c;它…...

编程日记 2023/10/24 16:41:39

Ubuntu 20.04 安装 Docker

大家好&#xff0c;我叫徐锦桐&#xff0c;个人博客地址为www.xujintong.com。平时记录一下学习计算机过程中获取的知识&#xff0c;还有日常折腾的经验&#xff0c;欢迎大家来访。 介绍 Docker容器具有以下三大特点&#xff1a; 轻量化&#xff1a;一台主机上运行的多个Dock…...

编程日记 2023/10/24 16:40:38

vue el-dialog弹出框自定义指令实现拖拽改变位置-宽度-高度

前言 在实际开发中我们经常使用el-dialog弹出框做表单&#xff0c;一般情况都是居中。遮挡到了一部分数据 当我们想要查看弹出框下面的数据时&#xff0c;就只能先把弹出框关闭&#xff0c;查看完数据之后在打开弹框 我们通过动态样式&#xff0c;和鼠标事件就可以实现。但自…...

编程日记 2023/10/24 16:39:38

玄铁C906——物理内存保护（PMP）介绍

1、前言 &#xff08;1&#xff09;本文描述的是玄铁C906的物理内存保护机制的实现中&#xff0c;与RISC-V架构手册中完整PMP机制的差异部分&#xff1b; &#xff08;2&#xff09;RISC-V架构的PMP机制&#xff0c;参考博客&#xff1a;《RISC-V架构——物理内存属性和物理内存…...

编程日记 2023/10/24 16:38:37

【进阶C语言】编译与链接、预处理符号详解

目录 一、翻译环境 编译 1.预编译&#xff08;预处理&#xff09; 2.编译 3.汇编 链接 二、运行环境 三、预处理符号详解 1.预定义符号 2.#define 3.#undef 4..命令行定义 5.条件编译 6.头文件包含 代码是怎么变成可执行程序的&#xff1f; 一、翻译环境 翻译环境…...

编程日记 2023/10/24 16:37:36

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2026/1/12 19:00:49

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2026/1/10 3:30:12

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2026/1/10 4:52:04

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/12 21:56:43

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2026/1/4 5:19:18

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

编程新知 2026/1/9 15:05:06

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/11/27 23:47:29

系统掌握PyTorch：图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

编程新知 2026/1/9 20:35:17

【C++】纯虚函数类外可以写实现吗？

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

编程新知 2026/1/9 20:37:02