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

Vue单文件组件

news 2026/4/8 10:11:10

一、.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

宝塔UA爬虫黑名单

宝塔UA爬虫黑名单宝塔waf防火墙 导入即可Go-http-client Python Java Python-urllib Alexa Toolbar hubspot my-tiny-bot eiki MegaIndex.ru ImagesiftBot DuckDuckGo-Favicons-Bot InfoTigerBot JikeSpider Ezooms serpstatbot BLEXBot Html5plus heritrix DigExt YYSpider li…...

编程新知 2026/4/8 10:00:52

新手必看：Altium Designer文本框属性面板（Properties Panel）全解，从字体颜色到背景填充

Altium Designer文本框属性全解析&#xff1a;从基础设置到专业图纸优化 在电子设计领域&#xff0c;原理图的可读性直接影响团队协作效率和设计质量。作为Altium Designer(简称AD)的初学者&#xff0c;掌握文本框属性的精细调节是提升图纸专业度的关键一步。本文将带您深入探…...

编程新知 2026/4/8 9:14:51

SEO优化排名报价一般多少钱_如何针对不同搜索引擎进行SEO优化排名

SEO优化排名报价一般多少钱_如何针对不同搜索引擎进行SEO优化排名 在当今的数字时代&#xff0c;SEO优化排名已经成为企业网站提升流量、吸引客户的重要手段。SEO优化排名报价一般多少钱&#xff0c;以及如何针对不同搜索引擎进行有效的SEO优化&#xff0c;是许多企业在决定是…...

编程新知 2026/4/8 9:12:50

新手必看：3步部署Yi-Coder-1.5B代码生成工具

新手必看&#xff1a;3步部署Yi-Coder-1.5B代码生成工具 1. 引言 作为一名开发者&#xff0c;你是否经常遇到这样的困扰&#xff1a;面对复杂编程任务时思路卡壳&#xff0c;或者需要快速切换多种编程语言却记不清语法细节&#xff1f;Yi-Coder-1.5B正是为解决这些问题而生的…...

编程新知 2026/4/8 8:55:45

px、em、rem、vw、vh、clamp 怎么选？

整理了一套单位使用规范&#xff0c;新手可以直接套用&#xff0c;不用再纠结怎么选&#xff0c;高效又避坑&#xff1a; /* 1. 根字号&#xff1a;设置rem基准&#xff0c;避免浏览器差异 */ html { font-size: 16px; }/* 2. 字体&#xff1a;rem&#xff08;全局统一&#xf…...

编程新知 2026/4/8 8:45:18

Cosmos-Reason1-7B实战教程：构建具身AI测试平台的完整技术路径

Cosmos-Reason1-7B实战教程&#xff1a;构建具身AI测试平台的完整技术路径 1. 项目简介&#xff1a;一个能“看懂”物理世界的AI 想象一下&#xff0c;你给AI看一张照片&#xff0c;它不仅能告诉你“图片里有一张桌子”&#xff0c;还能分析出“桌子上的杯子快要倒了&#xf…...

编程新知 2026/4/8 7:24:03

OpenClaw监控方案：Qwen3-4B模型API健康检查自动化

OpenClaw监控方案&#xff1a;Qwen3-4B模型API健康检查自动化 1. 为什么需要模型API监控 上周我的个人自动化流程突然中断了整整8小时——直到第二天早上查看日志才发现是Qwen3-4B模型API服务崩溃了。这个教训让我意识到&#xff1a;本地部署的大模型也需要像云服务一样建立健…...

编程新知 2026/4/8 6:42:33

SEO_从零开始，手把手教你制定SEO执行计划

SEO: 从零开始&#xff0c;手把手教你制定SEO执行计划 在当今数字化时代&#xff0c;网站的SEO&#xff08;搜索引擎优化&#xff09;是提高网站流量、吸引目标用户的关键。如果你是一个从零开始的SEO爱好者&#xff0c;可能会觉得这个领域有点复杂。不过&#xff0c;别担心&a…...

编程新知 2026/4/8 6:20:10

嵌入式CLI框架：轻量级树形命令行调试系统

1. 项目概述debug-cli是一个专为嵌入式系统设计的轻量级、模块化、面向对象的调试命令行接口&#xff08;CLI&#xff09;框架。它不依赖标准C库的stdio或动态内存分配&#xff0c;完全适配资源受限的MCU环境&#xff08;如 Cortex-M0/M3/M4、RISC-V 32位内核&#xff09;&…...

编程新知 2026/4/8 4:22:01

Unity | HDRP高清渲染管线实战：优化Lightmapping性能的10个关键技巧

1. 理解HDRP中的Lightmapping核心机制 在HDRP高清渲染管线中&#xff0c;光照烘焙&#xff08;Lightmapping&#xff09;是将复杂光照计算转化为纹理贴图的关键技术。与实时渲染不同&#xff0c;烘焙过程会预先计算场景中静态物体的间接光照、阴影和环境光遮蔽效果&#xff0c;…...

编程新知 2026/4/8 3:59:23