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

Vue单文件组件

news 2025/9/24 12:13:59

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

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/9/24 6:18:28

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/9/22 4:45:47

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/9/6 15:03:21

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/9/16 17:08:01

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2025/8/26 23:06:46

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/7/25 14:20:29

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2025/9/13 7:43:29

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

编程新知 2025/9/22 17:38:43

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2025/9/23 4:47:57

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

编程新知 2025/7/7 3:34:13