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

Vue单文件组件

news 2025/6/28 3:18:56

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

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/6/28 1:49:34

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2025/6/27 21:27:21

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/6/21 6:04:54

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2025/6/26 4:10:00

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

编程新知 2025/6/25 23:47:45

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

编程新知 2025/6/25 23:55:43

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

编程新知 2025/6/27 23:27:25

篇章二 论坛系统——系统设计

目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...

编程新知 2025/6/27 19:15:28

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

编程新知 2025/6/27 22:42:33

Vue 3 + WebSocket 实战：公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

编程新知 2025/6/26 2:18:45