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

Vue 的单文件组件（.vue 文件）script 标签的使用说明

news 来源：原创 2025/6/29 9:11:14

在 Vue 的单文件组件（.vue 文件）中，最多可以编写 2 个 <script> 标签，但需要满足特定条件：

1. Vue 3 的情况（主流用法）

从 Vue 3.2+ 开始，官方支持以下两种形式共存：

vue

<script>
// 普通 script (选项式 API / 非 setup 的逻辑)
export default {inheritAttrs: false, // 可声明普通选项customOptions: {} // 自定义配置
}
</script><script setup>
// 组合式 API 的 setup 语法糖
const msg = "Hello World"
</script>

两个 <script> 需要使用相同的语言脚本

vue

</script>

</script>

规则：

最多 1 个普通 <script>（不带 setup）
最多 1 个 <script setup>（带 setup 属性）
顺序不限，但两者逻辑会合并到组件中

2. Vue 2 的情况

传统 Vue 2 的 .vue 文件通常 只能有 1 个 <script> 标签，用于定义组件选项：

vue

<script>
export default {data() { return { msg: "Hello" } }
}
</script>

3. 其他注意事项

1、两个 <script> 需要使用相同的语言脚本

2、import必须在顶部，可以集中在任意一个<script>的顶部，也可以分散在两个<script>的顶部

3、export必须在没有setup的 <script> 中

vue

<script lang="ts">import { reactive } from "vue";export const applySampleListSymbol = Symbol("applySampleList");</script><script setup lang="ts" name="SampleInput">import { ref } from "vue";......</script><template></template><style scoped lang="scss"></style>

若使用 不同语言脚本（需构建工具支持），可通过 lang 属性区分多个 <script>，但实际开发中极少需要这么做：

vue

<script lang="ts">
// TypeScript 逻辑
</script><script lang="js">
// JavaScript 逻辑
</script>

总结

Vue 版本	最多 script 数量	条件
Vue 3	2	1 个普通 + 1 个 `setup`
Vue 2	1	无特殊属性

实际开发中推荐保持单一 <script>（或 setup）以保证代码可维护性。若有特殊需求（如混合选项式与组合式 API），才使用双 script 模式。

Vue 的单文件组件（.vue 文件）script 标签的使用说明

在 Vue 的单文件组件（.vue 文件）中，最多可以编写 2 个 <script> 标签，但需要满足特定条件： 1. Vue 3 的情况（主流用法） 从 Vue 3.2 开始，官方支持以下两种形式共存&#xff1…...

编程日记 2025/6/29 9:11:14

TIM输入捕获知识部分

越往左，频率越高；越往右，频率越低。【越紧凑，相同时间，次数越多】计算频率的方法：测评法、测周法、中界频率。频率的定义：1s内出现了多少个重复的周期测评法就是从频率的定义出发的&#…...

编程日记 2025/4/25 12:42:46

【数据可视化-30】Netflix电影和电视节目数据集可视化分析

🧑 博主简介：曾任某智慧城市类企业算法总监，目前在美国市场的物流公司从事高级算法工程师一职，深耕人工智能领域，精通python数据挖掘、可视化、机器学习等，发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…...

编程日记 2025/6/29 10:51:17

多线程事务？拿捏！

场景:有一批1万或者10万数据，插入数据库，怎么做事务中进行批量提交 publList<List<OrderPo>> partition Lists.partition(list, 450);StopWatch stopWatch new StopWatch();stopWatch.start();// 顺序插入for (List<OrderPo> sub…...

编程日记 2025/6/29 10:48:39

Spring Boot 自动配置深度解析：从源码结构到设计哲学

Spring Boot 自动配置深度解析：从源码结构到设计哲学为什么自动配置如此重要？ 在传统 Spring 开发中，开发者要手动配置大量 XML 或 JavaConfig，过程繁琐、重复且容易出错。Spring Boot 引入自动配置机制，极大地简化…...

编程日记 2025/6/29 10:30:40

Linux下载与安装——笔记

Linux 是一种自由和开放源代码的操作系统（OS），其核心（Kernel）由 Linus Torvalds 于 1991 年首次发布。 1、选择适合的 Linux 发行版根据使用场景和技术水平选择： 新手入门：Ubuntu&#xff08…...

编程日记 2025/6/29 10:49:57

09前端项目----分页功能

分页功能分页器的优点实现分页功能自定义分页器先实现静态分页器调试分页器动态数据/交互 Element UI组件分页器的优点电商平台同时展示的数据很多，所以采用分页功能实现分页功能 Element UI已经有封装好的组件，但是也要掌握原理，以及自定…...

编程日记 2025/6/29 9:14:04

头歌之动手学人工智能-机器学习 --- PCA

目录第1关：维数灾难与降维第2关：PCA算法流程任务描述编程要求测试说明第3关：sklearn中的PCA 任务描述编程要求测试说明第1关：维数灾难与降维第2关：PCA算法流程任务描述本关任务：补充…...

编程日记 2025/6/29 9:11:14

Spring 中的循环引用问题

本章来聊聊Spring 中的循环引用问题该如何解决。这里聊的很粗糙，并没有那么细节，只是大概了解了一点。什么是循环引用？ 如下图所示： 图中有两个类，一个 Class A ，A 中又引用了 B，Class B 中又…...

编程日记 2025/6/29 9:11:18

author instruction https://www.siggraph.org/preparing-your-content/author-instructions/ 使用latex模板 https://research.siggraph.org/blog/guides/how-to-use-the-acm-siggraph-tog-latex-template/ 格式要求（字体、页面大小等） https://sa202…...

编程日记 2025/6/29 9:11:15

Python学习笔记（三）（程序流程控制）

文章目录一、条件语句（if/elif/else）语法：示例： 二、循环语句1. for 循环语法：示例： 2. while 循环语法：示例： 三、循环控制语句1. break：立即终止循环2. continue&…...

编程日记 2025/6/29 9:15:14

onnx注册cpu版flashattention

摘要本教程展示了如何在 ONNX Runtime 中注册一个 CPU 可执行的 FlashAttention 算子。首先，可以直接升级到 ONNX Runtime v1.16 及以上，以获得内置的 FlashAttention CPU 实现citeturn0search2；其次，演示了如何通过 ONNX Runtime 的 Custom Op 接口自定义实现并注…...

编程日记 2025/6/29 9:11:19

WebAssembly：开启高性能Web应用新时代

一、引言随着互联网技术的飞速发展，Web应用的复杂度和性能要求越来越高。传统的Web开发技术，如JavaScript，虽然功能强大，但在处理复杂计算和高性能需求时仍存在一些局限性。WebAssembly（简称Wasm）作为一种…...

编程日记 2025/6/29 9:12:41

【前端】手写代码输出题易错点汇总

不定期补充。目录异步事件循环this作用域/变量提升/闭包原型/继承异步事件循环 const promise new Promise((resolve, reject) > {console.log(1);console.log(2); }); promise.then(() > {console.log(3); }); console.log(4); //1 //2 //4promise.then 是微任务&…...

编程日记 2025/4/25 12:35:08

STM32F103_HAL库+寄存器学习笔记20 - CAN发送中断+ringbuffer + CAN空闲接收中断+接收所有CAN报文+ringbuffer

导言如上所示，在[[STM32F103_HAL库寄存器学习笔记19 - CAN发送中断CAN接收中断接收所有CAN报文ringbuffer数据结构]]的基础上，为CAN发送端也引入了ringbuffer（环形缓冲区）机制。CAN发送有三个发送邮箱，为什么还另外需…...

编程日记 2025/6/29 9:50:50

小白自学python第二天

学习python的第二天一、判断语句 1、布尔类型和比较运算符 1、布尔类型表示现实生活中的逻辑，真（True，用数字1表示）和假（False，用数字0表示） 2、布尔类型变量的定义变量的名称布尔类…...

编程日记 2025/4/25 12:33:58

JavaScript 异步编程与请求取消全指南

JavaScript 异步编程与请求取消全指南涵盖：同步/异步、Promise、async/await、AbortController、前后端协作一、同步与异步 1. 同步（Synchronous） 定义：代码按顺序执行，前一步完成才能执行下一步。特点&#xff1…...

编程日记 2025/6/29 9:11:22

Redis 核心应用场景

高性能缓存 Redis 作为内存数据库，读写性能可达10万 QPS，适合缓存热点数据（如商品详情、用户会话），显著降低数据库压力。通过设置过期时间（TTL）自动清理非热点数据，推荐结合allkeys-…...

编程日记 2025/6/29 9:15:09

KMS工作原理及其安全性分析

在当今数字化时代，数据安全已经成为企业和个人最为关注的话题之一。随着云计算和大数据的快速发展，如何安全地管理密钥成为了一个重要的挑战。KMS（Key Management Service，密钥管理服务）作为一种专业的密钥管理解决方案…...

编程日记 2025/6/29 9:11:51

施磊老师基于muduo网络库的集群聊天服务器(六)

文章目录客户端开发开始客户端首页面功能为何不逐行开发？客户端CMake代码搭配知识补充--有很多漏的客户端main-登录,注册,退出群组有问题测试客户端好友添加与聊天功能表驱动设计：commandMapcommandHandlerMap为什么都是int, string添加好友和聊天功能…...

编程日记 2025/6/29 9:11:25

有关字体，语言，字符编码相关的基础知识，询问chatgpt所得

学习这个知识点的背景是，我需要做一个在canvas 上书写矢量文本的功能， 使用opentype来加载字体文件，并将内容转换为 svg，导入画布。但是有些字体文件是不包含一些其他语言的字符的。就可能出现 “无效字符”。花了点时间研究…...

编程日记 2025/4/25 12:31:43

Obsidian和Ollama大语言模型的交互过程

之前的文章中介绍了Obsidian配合Ollama的使用案例，那么它们是如何配合起来的呢？其实这个问题并不准确，问题的准确描述应该是Obsidian的Copilot插件是如何与Ollama大语言模型交互的。因为Obsidian在这里只是一个载体，核心功能还是C…...

编程日记 2025/6/29 9:11:35

架构-数据库系统

数据库系统一、数据库系统概述 （一）课程核心模块覆盖数据库设计、关系代数、规范化理论、数据控制四大核心模块，旨在构建从理论到实践的完整知识体系至。 （二）典型应用场景数据管理：学生信息管理&a…...

编程日记 2025/6/29 9:13:03

【C到Java的深度跃迁：从指针到对象，从过程到生态】第三模块·面向对象深度进化 —— 第十二章接口：比C函数指针更强大的契约

一、从函数指针到接口契约 1.1 C函数指针的本质限制 C语言通过函数指针实现回调机制，但存在根本性缺陷： 回调函数示例： typedef void (*Logger)(const char*); void process_data(int data, Logger logger) { // ... logger("Pro…...

编程日记 2025/5/30 13:39:12

【HFP】蓝牙语音通话控制深度解析：来电拒接与通话终止协议

目录一、来电拒接的核心流程与信令交互 1.1 拒接场景的分类与触发条件 1.2 HF 端拒接流程 1.3 AG 端拒接流程二、通话终止流程：主动断开与异常中断 2.1 终止场景的界定 2.2 HF 端终止流程 2.3 AG 端终止流程三、信令协议的核心要素：AT 命令与…...

编程日记 2025/6/29 10:22:24

linux 中断子系统层级中断编程

虚拟中断控制器代码： #include<linux/kernel.h> #include<linux/module.h> #include<linux/clk.h> #include<linux/err.h> #include<linux/init.h> #include<linux/interrupt.h> #include<linux/io.h> #include<linu…...

编程日记 2025/6/29 9:14:17

continue插件实现IDEA接入本地离线部署的deepseek等大模型

文章目录前言一、IDEA安装continue二、continue部署本地大模型三、continue聊天窗口使用deepseek R1四、continue批量接入硅基流动的模型API 前言亲爱的家人们，创作很不容易，若对您有帮助的话，请点赞收藏加关注哦，您的关注是我…...

编程日记 2025/6/29 9:11:33

Redis-缓存应用本地缓存与分布式缓存的深度解析

Redis缓存场景与策略：本地缓存与分布式缓存的深度解析在当今高并发、低延迟的互联网架构中，缓存技术是优化系统性能的核心手段之一。Redis作为分布式缓存的标杆，与本地缓存共同构成了缓存体系的两大支柱。然而，两者的适用场景与…...

编程日记 2025/6/29 9:12:49

关于按键映射软件的探索（其一）

那么先说结论——重构了一次，我还是失败了，失败于拓展调整个性化的设计，不过我还是实现了按键监测然后显示的功能。只不过是说我对于WPF软件等的封装和软窗口的功能还是不怎么熟悉。引言在许多游戏玩家中，高难度操作&#xff08…...

编程日记 2025/4/25 12:25:11

测试基础笔记第十一天

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、查询连接1.内连接2.左连接3.右连接4.左右连接的必要性5.自关联6.普通查询7.子查询8.子查询充当数据源二、数据库高级扩展内容1.外键2.索引3.验证索引效果案例实…...

编程日记 2025/6/29 9:11:44

优选算法第十讲：字符串

优选算法第十讲：字符串 1.最长公共前缀2.最长回文子串3.二进制求和4.字符串相乘 1.最长公共前缀 2.最长回文子串 3.二进制求和 4.字符串相乘...

编程日记 2025/6/29 9:45:10

RK3588芯片NPU的使用：官方rknn_yolov5_android_apk_demo运行与解读

一、本文的目标本文将完成两项任务：官方的调用摄像头动态目标识别例子运行在rk3588的开发板上。解读源码以增加对rknn开发的认识。二、开发环境说明主机系统：Windows 11目标设备：搭载RK3588芯片的安卓开发板核心工具：Android Studio Koala | 2024.1.1 Patch 2，NDK 27.…...

编程日记 2025/6/29 9:11:26

面试篇：Spring Boot

基础概念 Spring Boot的核心优势是什么？ Spring Boot 的核心优势如下： 自动配置：根据项目中的依赖自动进行配置，减少了大量的手动配置工作。内嵌服务器：内置 Tomcat、Jetty 等容器，应用可以直接运行为一…...

编程日记 2025/6/29 9:11:28

开源漏洞扫描器：OpenVAS

一、OpenVAS介绍 OpenVAS (Open Vulnerability Assessment System) 是一款功能强大的开源漏洞扫描器。它由 Greenbone Networks 开发和维护，是 Greenbone 安全管理器 (GSM) 产品的基础，同时也有免费的社区版本（Greenbone Community Edition&…...

编程日记 2025/5/16 8:51:42

PCB封装主要组成元素

PCB（Printed Circuit Board，印刷电路板）封装是指将电子元件固定在 PCB 上，并实现电气连接的方式。主要包括以下几类。 1. 焊盘（Pad） 作用：焊盘是 PCB 封装中最重要的元素之一，它是…...

编程日记 2025/6/29 9:14:02

STC8H DMA 串口1全双工中断方式收发通讯C语言

/************* 功能说明 ************** 本例程基于STC8H8K64U为主控芯片的实验箱9进行编写测试，STC8H系列带DMA模块的芯片可通用参考. 串口1全双工中断方式收发通讯程序。通过PC向MCU发送数据, MCU将收到的数据自动存入DMA空间. 当DMA空间存满设置大小的…...

编程日记 2025/6/29 9:16:11

考研英一学习笔记

2024 年全国硕士研究生招生考试英语（一）试题 （科目代码：201） Section Ⅰ Use of English Directions: Read the following text. Choose the best word(s) for each numbered blank and mark A, B, C or D on the ANS…...

编程日记 2025/6/29 9:11:43

深度理解spring——BeanFactory的实现

BeanFactory Spring之BeanFactory什么是BeanFactoryApplicationContext相对BeanFactory实现的功能性扩展1. MessageSource2. ResourcePatternResolver3. ApplicationEventPublisher4. EnvironmentCapable通用ApplicationContext实践实现BeanFactoryBeanFactory后处理器排序让谁…...

编程日记 2025/6/29 9:12:38

半导体---检测和量测

目录 1.简介2.AOI(检测) 1.简介半导体晶圆制造前道量测和检测设备。公司产品涵盖光学薄膜量测、光学关键尺寸量测、光学衍射套刻量测、光学集成量测、X射线薄膜量测、X射线材料性能量测、X射线成分及表面污染量测等系列产品及解决方案。半导体领域的量测和AOI如同半导体制造…...

编程日记 2025/6/29 9:11:27

CentOS 7 磁盘分区详细教程

CentOS 7 磁盘分区详细教程在服务器管理和运维过程中，磁盘分区是一项基础且重要的操作。合理的磁盘分区可以提高数据存储的安全性、高效性，方便系统管理与维护。本文将详细介绍在 CentOS 7 系统中进行磁盘分区的具体步骤和方法。一、准备工作 1.1 确…...

编程日记 2025/5/26 6:56:24

EasyRTC音视频实时通话在线教育解决方案：打造沉浸式互动教学新体验

一、方案概述 EasyRTC是一款基于WebRTC技术的实时音视频通信平台，为在线教育行业提供了高效、稳定、低延迟的互动教学解决方案。本方案将EasyRTC技术深度整合到在线教育场景中，实现师生间的实时音视频互动等核心功能，打造沉浸式的远程学习体…...

编程日记 2025/5/17 8:03:37

栈（Stack）和队列（Queue）

栈栈（stack）是一种特殊的线性表，只允许在固定的一端进行插入和删除操作。我们可以将栈近似看作一个桶，要取出桶底的元素，就要将桶顶的元素先取出，再将底部元素取出，也可以叫做后进先出。这…...

编程日记 2025/6/29 9:11:31

1、AI及LLM基础：Python语法入门教程

Python语法入门教程这是一份全面的Python语法入门教程，涵盖了注释、变量类型与操作符、逻辑运算、list和字符串、变量与集合、控制流和迭代、模块、类、继承、进阶等内容，通过详细的代码示例和解释，帮助大家快速熟悉Python语法。文章目录 Python语法入门教程一、注释二…...

编程日记 2025/6/29 9:11:29

跨境电商关键词分类打标

你是一名顶级的亚马逊关键词分析专家，你将用你的亚马逊运营专业的经验帮助我做精准的关键词打标。首先你会学习以下的知识内容，以便于你后续的关键词分析。人群词是什么？是指直接描述或定位特定用户群体的关键词或标签，用于精准识别目标受众的身份、需求或行为特征。 …...

编程日记 2025/6/29 9:47:07

C# 结构（Struct）

原文：C# 结构（Struct）_w3cschool 在 C# 中，结构是值类型数据结构。它使得一个单一变量可以存储各种数据类型的相关数据。struct 关键字用于创建结构。结构是用来代表一个记录。假设您想跟踪图书馆中书的动态。您可能想跟踪每本…...

编程日记 2025/6/29 9:16:05

Java Collections工具类指南

一、Collections工具类概述 java.util.Collections是Java集合框架中提供的工具类，包含大量静态方法用于操作和返回集合。这些方法主要分为以下几类： 排序操作查找和替换同步控制不可变集合特殊集合视图其他实用方法二、排序操作 1. 自然排序 List&…...

编程日记 2025/4/29 21:02:25

BBRv2，v3 吞吐为什么不如 BBRv1

为什么 BBRv2/3 测试下来吞吐远不如 2016 年底的 BBRv1，这个事曾经提到过很多次，今天分析一下原理。注意三个事实： BBR 是一种拥塞控制算法；BBR 已经迭代到了 v3 版本；BBRv3 的 “性能” 远不如 BBRv1. 第二点有点不…...

编程日记 2025/6/29 10:22:31

Java集成【邮箱验证找回密码】功能

目录 1.添加依赖 2.选择一个自己的邮箱，作为发件人角色。 3.编写邮箱配置【配置发件人邮箱】 4.编写邮箱配置类 5.编写controller业务代码 6.演示效果 7.总结流程 8.注意结语 1.添加依赖  <dependency><groupId>or…...

编程日记 2025/5/31 14:28:22

Java微服务架构设计与实践 - 面试实战

Java微服务架构设计与实践 - 面试实战在互联网大厂的Java求职者面试中，微服务架构设计是一个常见的考察点。本文通过严肃的面试官和资深Java架构师马架构之间的对话，详细展示了如何回答SpringCloud相关的核心技术问题。第一轮提问面试官&#xff1…...

编程日记 2025/6/29 10:16:59

Java后端开发面试题(含答案）

在广州一个小公司（BOSS标注是20-99人，薪资2-3k左右)，直接面试没有笔试，按流程自我介绍，然后直接拿着简历问项目场景，问题是结合场景题和八股文。废话不多说，直接分享面试题目个大家做参考。 1、…...

编程日记 2025/6/29 10:58:42

1. Vue 3 的情况（主流用法）

规则：

2. Vue 2 的情况

3. 其他注意事项

总结

相关文章：