Vue单文件组件
一、.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的单文件组件的时候，一个.vue文件就是一个组件。 例如我们创建一个School组件： 二、组件的结构 我们编写网页代码的时候有HTML结构、CSS样式、JS交互。 组件里也是同样存在这三种结构的： <template><d…...
轻松理解 Transformers（1）：Input部分
编者按：Transformers 是人工智能领域近年来最引人瞩目的技术之一，它为语言生成模型的发展做出了巨大的贡献。随着大语言模型（LLM）的兴起，公众对其背后的技术原理也越来越感兴趣。但是由于Transformers本身具有一定的复…...
PHP MySQL 交互 笔记/练习
PHP 与 MySQL 交互 交互函数 函数名作用mysqli_connect()与MySQL 数据库建立连接。mysqli_close()关闭与MYSQL 数据库建立的连接。mysqli_connect_errno()与MySQL 数据库建立连接时，发生错误时的错误编号。mysqli_connect_error()与MySQL 数据库建立连接时&#x…...
领域驱动设计：基于DDD的微服务设计实例
文章目录 项目基本信息战略设计战术设计后续的工作 用一个项目来了解 DDD 的战略设计和战术设计，走一遍从领域建模到微服务设计的全过程，一起掌握 DDD 的主要设计流程和关键 点。 项目基本信息 项目的目标是实现在线请假和考勤管理。功能描述如下&…...
【PB续命02】Oracle中加密及编码等
Oracle中实现Md5/Base64/AesBase64/UrlEncode等加密编码的使用备忘，参考其它人的贴子，Oracle 11g 亲测有效。 1. Oracle中实现Md5加密 SELECT lower(MD5(白龙马5217)) FROM dual; --返回结果 72853926982028ab8219921ad2918b8f --或 select utl_raw.…...
STM32-LTC6804方案成熟BMS方案
方案下载链接！！https://mp.weixin.qq.com/s?__bizMzU2OTc4ODA4OA&mid2247549092&idx1&snc73855c4e3d5afddd8608d8528864f95&chksmfcfb1373cb8c9a65a4bd1f545a1a587af882f209e7ccbb8944f4d2514d241ca1d7fcc4615e10&token539106225&a…...
一步一步认知机器学习
1，前言 之前学习并且实操了一些算法框架用来探索相关方向的可能性，但是总不了解相关的步骤。因为一步一步按照别人给出的步骤去操作，解决一些操作时出现的问题，基本可以达到目的。但是这个也基本限制了在那个框架而已。对于算法还…...
现代C++、STL、QTL的使用
0、现代C中最重要的是： 右值引用&&、移动语义std::move、完美转发std::forward、万能引用T&& void Func(int& x) { cout << "左值引用" << endl; } void Func(const int& x) { cout << "const左值引用…...
Android 备案公钥、签名 MD5获取方法
公钥和 MD5 值可以通过安卓开发工具、Keytool、Jadx-GUI 等多种工具获取，本文以 jadx-gui 为例。 1 windows 下载 jadx-gui 工具 下载 jadx-gui 工具 在这里选择一个下载 下载后 解压文件 双击运行程序，然后选择 release apk安装包 2 Mac 打开终端&a…...
1688拍立淘接口，按图搜索商品接口，图片识别接口，图片上传搜索接口，图片搜索API接口，以图搜货接口
1688拍立淘接口的作用是让用户通过上传图片或输入图片链接的方式，调用1688的图片搜索引擎，返回与该图片相关的所有1688商品。 使用该接口需要先获取一个key和secret，然后参考API文档里的接入方式和示例，查看测试工具是否有需要的…...
H3C AC通过Web平台进行AC软件的升级？
软件升级的流程 1、获取软件版本 登录新华三官网（首页>产品支持与服务>文档与软件>软件下载），将指定的软件版本下载至本地。 无线路由器-无线接入点-无线控制器-新华三集团-H3C 官网软件下载公共账号密码：账号&#x…...
网络通信和tcp协议
一、计算机网络架构模型 1、OSI七层模型 2、TCP/IP模型 3、TCP/IP协议族 无论是什么网络模型，都是为上一层提供服务，抽象层建立在低一层提供的服务上，每层都对应不同的协议 4、地址和端口号 1）MAC地址 MAC 地址共 48 位&#…...
React 核心与实战2023版
课程亮点： 完整的前后台项目（PC+移动；完成业务；）React 最新企业标准技术栈（React 18 + Redux + ReactRouter + AntD）React + TypeScript （为大型项目奠定了基础）课程内容安排： React 介绍 React 是什么？ React 是由Meta公司研发，是一个用于 构建Web和原生交互界面…...
在 Android 上测试 Kotlin 协程
文章目录 官方文档在测试中调用挂起函数TestDispatchersStandardTestDispatcherUnconfinedTestDispatcher 注入测试调度程序设置主调度程序在测试之外创建调度程序创建您自己的 TestScope注入作用域 官方文档 https://developer.android.google.cn/kotlin/coroutines/test?hl…...
图论04-【无权无向】-图的广度优先遍历BFS
文章目录 1. 代码仓库2. 广度优先遍历图解3.主要代码4. 完整代码 1. 代码仓库 https://github.com/Chufeng-Jiang/Graph-Theory 2. 广度优先遍历图解 3.主要代码 原点入队列原点出队列的同时，将与其相邻的顶点全部入队列下一个顶点出队列出队列的同时，将…...
vue3 v-model的使用
🙂博主：锅盖哒 🙂文章核心：vue3 v-model的使用 目录 前言 什么是v-model？ 基本的v-model用法 自定义组件中的v-model 前言 当涉及到Vue.js 3的前端开发时，v-model是一个不可或缺的工具，它…...
Ubuntu 20.04 安装 Docker
大家好，我叫徐锦桐，个人博客地址为www.xujintong.com。平时记录一下学习计算机过程中获取的知识，还有日常折腾的经验，欢迎大家来访。 介绍 Docker容器具有以下三大特点： 轻量化：一台主机上运行的多个Dock…...
vue el-dialog弹出框自定义指令实现拖拽改变位置-宽度-高度
前言 在实际开发中我们经常使用el-dialog弹出框做表单，一般情况都是居中。遮挡到了一部分数据 当我们想要查看弹出框下面的数据时，就只能先把弹出框关闭，查看完数据之后在打开弹框 我们通过动态样式，和鼠标事件就可以实现。但自…...
玄铁C906——物理内存保护（PMP）介绍
1、前言 （1）本文描述的是玄铁C906的物理内存保护机制的实现中，与RISC-V架构手册中完整PMP机制的差异部分； （2）RISC-V架构的PMP机制，参考博客：《RISC-V架构——物理内存属性和物理内存…...
【进阶C语言】编译与链接、预处理符号详解
目录 一、翻译环境 编译 1.预编译（预处理） 2.编译 3.汇编 链接 二、运行环境 三、预处理符号详解 1.预定义符号 2.#define 3.#undef 4..命令行定义 5.条件编译 6.头文件包含 代码是怎么变成可执行程序的？ 一、翻译环境 翻译环境…...
从VARCHAR到NVARCHAR2：MySQL表结构迁移OpenGauss必须掌握的10个数据类型转换细节
从VARCHAR到NVARCHAR2：MySQL表结构迁移OpenGauss必须掌握的10个数据类型转换细节 在数据库国产化浪潮中，将MySQL迁移至OpenGauss已成为许多企业的技术刚需。作为PostgreSQL系数据库的代表，OpenGauss在语法规则、存储机制等方面与MySQL存在显著…...
GoJieba词性标注功能实战：从基础用法到高级配置
GoJieba词性标注功能实战：从基础用法到高级配置 【免费下载链接】gojieba "结巴"中文分词的Golang版本 项目地址: https://gitcode.com/gh_mirrors/go/gojieba GoJieba作为"结巴"中文分词的Golang版本，提供了强大的中文处理能…...
Air8101 多媒体WiFi模组（高清显示+视频采集）
一、模组概述 Air8101是一款集成 2.4G WiFi6 BLE 5.4 的高性能 WiFi SoC，最大支持 200W 像素的静态图像拍照，支持 1多路摄像头接入、H.264 视频编码与推流能力，最高支持1280*720P分辨率LCD显示，外设接口丰富，搭配 Lua…...
SAM 3科研可视化：分割结果嵌入Jupyter Notebook交互式分析
SAM 3科研可视化：分割结果嵌入Jupyter Notebook交互式分析 1. 引言：当科研遇上智能分割 想象一下这样的场景：你正在分析一批生物医学图像，需要从复杂的细胞图像中精确分离出特定的细胞结构。传统方法需要手动标注，耗…...
终极指南：TwitchAdSolutions自定义播放器与备用流高级配置技巧
终极指南：TwitchAdSolutions自定义播放器与备用流高级配置技巧 【免费下载链接】TwitchAdSolutions 项目地址: https://gitcode.com/gh_mirrors/tw/TwitchAdSolutions TwitchAdSolutions是一款强大的Twitch广告拦截工具，通过自定义播放器类型与备…...
Wan2.2-I2V-A14B镜像部署教程：系统盘50GB+数据盘40GB空间规划指南
Wan2.2-I2V-A14B镜像部署教程：系统盘50GB数据盘40GB空间规划指南 1. 镜像概述与核心价值 Wan2.2-I2V-A14B是一款专为文生视频任务优化的私有部署镜像，特别适合需要高质量视频生成的企业和个人开发者。这个镜像最大的特点是开箱即用——所有环境、依赖和…...
【nginx】深入解析net::ERR_CONTENT_LENGTH_MISMATCH 200：权限配置与日志排查实战
1. 错误现象与初步诊断 当你用浏览器访问Nginx托管的网站时，突然看到控制台报错net::ERR_CONTENT_LENGTH_MISMATCH 200，但页面居然还能正常显示部分内容，这种情况是不是很诡异？我第一次遇到时也是一头雾水。这个错误表面看是内容长…...
基于Qwen3.5-2B的数据库课程设计智能指导系统
基于Qwen3.5-2B的数据库课程设计智能指导系统 1. 课程设计的痛点与解决方案 每到学期末，计算机专业的学生们都会面临一个共同的挑战——数据库课程设计。从选题到ER图设计，再到SQL编写和报告撰写，整个过程往往让学生们感到无从下手。传统的…...
沃虎电子｜千兆网络变压器选型实战：从PoE等级到PHY匹配，一站式解决工程师的三大难题
在工业以太网、安防监控、光伏储能、无线AP等场景全面爆发的今天，千兆网络变压器已成为硬件设计中不可或缺的关键一环。然而，选型过程中的“隐形陷阱”——PoE供电不稳、封装温度错配、PHY芯片接法错误——却频频导致设备掉电、通信故障甚至批量召回。 …...
ReactiveObjC 核心概念解析：从 RACSignal 到 RACCommand
ReactiveObjC 核心概念解析：从 RACSignal 到 RACCommand 【免费下载链接】ReactiveObjC The 2.x ReactiveCocoa Objective-C API: Streams of values over time 项目地址: https://gitcode.com/gh_mirrors/re/ReactiveObjC ReactiveObjC 是一个强大的 Object…...