直接在html中引入Vue.js的cdn来实现Vue3的组合式API
Vue3的组合式API是使用setup函数来编写组件逻辑的。setup函数是Vue3中用于替代Vue2的选项API（如data、methods等）的一种方式。在setup函数中，你可以访问到一些特殊的响应式对象，并且可以返回一些可以在模板中使用的数据、方法等。
以下是一个文章列表示例，展示了如何在Vue3中使用组合式API的setup函数编写组件：
把所有代码都写在一个html文件
<!DOCTYPE html>
<html>
<head><title>Vue 3 CDN Example - Composition API</title><meta charset="utf-8"><script src="vue.global.prod.min.js"></script><script src="vue-router.global.min.js"></script>
</head>
<body><div id="app"><router-view></router-view>
</div><script type="module">const { createApp, ref } = Vue;const { createRouter, createWebHashHistory } = VueRouter;// 示例数据const artcles = [{ id: 100, title: '孤注一掷，玩的就是真实', content: '电影《孤注一掷》于8月8日正式上映，目前票房已破8亿。电影自点映以来口碑与票房狂飙，连破暑期档单日点映最高票房、中国影史单日点映票房、中国影史点映票房纪录，影片结尾部分更让不少观众认为会有续集。昨日在接受采访时，导演申奥明确表示不会有续集，“目前没有续集的计划，那个镜头主要想表达的就是，网络诈骗很难根除，层出不穷，还是需要我们提升自身的免疫力。”' },{ id: 101, title: '《封神第一部》上映：网友被费翔的商务殷语洗脑了', content: '《封神第一部》主要讲述的是商王殷寿与狐妖妲己勾结，暴虐无道，引发天谴。昆仑仙人姜子牙携封神榜”下山，寻找天下共主，以救苍生。西伯侯之子姬发逐渐发现殷寿的本来面目，反出朝歌。' },{ id: 102, title: '《消失的她》票房破35亿 排名中国票房榜第12', content: '《消失的她》由陈思诚监制，朱一龙、倪妮、文咏珊等主演的悬疑犯罪片。该片改编自前苏联电影《为单身汉设下的陷阱》，讲述了何非的妻子李木子在结婚周年旅行中离奇消失，失踪多天后一个陌生女人突然闯入，并坚称是何非妻子，从而牵扯出一个惊天大案的故事。' }];// 组件：文章列表const ArtcleList = {template: `<div><h1>文章列表</h1><ul><li v-for="artcle in artcles" :key="artcle.id"><router-link :to="'/artcle/' + artcle.id">{{ artcle.title }}</router-link></li></ul></div>`,setup() {return {artcles};}};// 组件：文章详情const ArtcleDetail = {template: `<div><h1>{{ artcle.title }}</h1><p>{{ artcle.content }}</p></div>`,setup() {const route = VueRouter.useRoute();const artcleId = route.params.id;const artcle = ref(artcles.find(artcle => artcle.id === Number(artcleId)));return {artcle};}};// 创建路由const router = createRouter({history: createWebHashHistory(),routes: [{ path: '/', component: ArtcleList },{ path: '/artcle/:id', component: ArtcleDetail }]});// 创建Vue应用const app = createApp({});app.use(router);// 挂载应用app.mount('#app');</script></body>
</html>
你也可以单独将js抽离出来
index.html
<!DOCTYPE html>
<html>
<head><title>Vue 3 CDN Example - Composition API</title><meta charset="utf-8"><script src="vue.global.prod.min.js"></script><script src="vue-router.global.min.js"></script>
</head>
<body><div id="app"><router-view></router-view>
</div><script type="module" src="app.js"></script></body>
</html>
app.js
const { createApp, ref } = Vue;
const { createRouter, createWebHashHistory } = VueRouter;// 示例数据
const artcles = [{ id: 100, title: '孤注一掷，玩的就是真实', content: '电影《孤注一掷》于8月8日正式上映，目前票房已破8亿。电影自点映以来口碑与票房狂飙，连破暑期档单日点映最高票房、中国影史单日点映票房、中国影史点映票房纪录，影片结尾部分更让不少观众认为会有续集。昨日在接受采访时，导演申奥明确表示不会有续集，“目前没有续集的计划，那个镜头主要想表达的就是，网络诈骗很难根除，层出不穷，还是需要我们提升自身的免疫力。”' },{ id: 101, title: '《封神第一部》上映：网友被费翔的商务殷语洗脑了', content: '《封神第一部》主要讲述的是商王殷寿与狐妖妲己勾结，暴虐无道，引发天谴。昆仑仙人姜子牙携封神榜”下山，寻找天下共主，以救苍生。西伯侯之子姬发逐渐发现殷寿的本来面目，反出朝歌。' },{ id: 102, title: '《消失的她》票房破35亿 排名中国票房榜第12', content: '《消失的她》由陈思诚监制，朱一龙、倪妮、文咏珊等主演的悬疑犯罪片。该片改编自前苏联电影《为单身汉设下的陷阱》，讲述了何非的妻子李木子在结婚周年旅行中离奇消失，失踪多天后一个陌生女人突然闯入，并坚称是何非妻子，从而牵扯出一个惊天大案的故事。' },{ id: 103, title: '电影《八角笼中》上映29天，票房突破21亿', content: '新京报讯 8月2日，电影《八角笼中》上映29天，累计票房突破21亿。该片由王宝强执导，王宝强、陈永胜、史彭元领衔主演，王迅、张祎曈主演，于7月6日正式上映。' },{ id: 104, title: '速度与激情 10》8 月 18 日上线国内视频平台', content: '据 IT 之家此前报道，《速度与激情 10》今年 5 月在内地院线上映，比北美提前两天。目前，该片豆瓣评分 6.2。《速度与激情》系列电影由罗伯・科恩等执导，于 2001 年至 2021 年期间上映了 9 部。《速度与激情 9》于 2021 年 5 月 21 日在中国内地上映，2021 年 6 月 25 日在北美上映。' }
];// 组件：文章列表
const ArtcleList = {template: `<div><h1>文章列表</h1><ul><li v-for="artcle in artcles" :key="artcle.id"><router-link :to="'/artcle/' + artcle.id">{{ artcle.title }}</router-link></li></ul></div>`,setup() {return {artcles};}
};// 组件：文章详情
const ArtcleDetail = {template: `<div><h1>{{ artcle.title }}</h1><p>{{ artcle.content }}</p></div>`,setup() {const route = VueRouter.useRoute();const artcleId = route.params.id;const artcle = ref(artcles.find(artcle => artcle.id === Number(artcleId)));return {artcle};}
};// 创建路由
const router = createRouter({history: createWebHashHistory(),routes: [{ path: '/', component: ArtcleList },{ path: '/artcle/:id', component: ArtcleDetail }]
});// 创建Vue应用
const app = createApp({});
app.use(router);// 挂载应用
app.mount('#app');
结构
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QbqvxK4N-1691656932134)(/img/bVc9chD)]](https://img-blog.csdnimg.cn/21b76c9d6af741e5b1aa957da81a817f.png)
演示
http://demo.likeyunba.com/vue3-composition-api/#/
源码下载
vue.global.prod.min.js
vue-router.global.min.js
下载地址：https://likeyun.lanzout.com/ibnQn14ymgud
作者
TANKING
相关文章：
直接在html中引入Vue.js的cdn来实现Vue3的组合式API
Vue3的组合式API是使用setup函数来编写组件逻辑的。setup函数是Vue3中用于替代Vue2的选项API（如data、methods等）的一种方式。在setup函数中，你可以访问到一些特殊的响应式对象，并且可以返回一些可以在模板中使用的数据、方法等。…...
YAPi在线接口文档简单案例（结合Vue前端Demo）
在前后端分离开发中，我们都是基于文档进行开发，那前端人员有时候无法马上拿到后端的数据，该怎么办？我们一般采用mock模拟伪造数据直接进行测试，本篇文章主要介绍YApi在线接口文档的简单使用，并结合Vue的小d…...
Java基础篇--Runtime类
介绍 Runtime类用于表示虚拟机运行时的状态，它用于封装JVM虚拟机进程。每次使用java命令启动虚拟机都对应一个Runtime实例，并且只有一个实例。 因此在Runtime类定义的时候，它的构造方法已经被私有化了(单例设计模式的应用)，对象…...
数字后端笔试题（1）DCG后congestion问题
我正在「拾陆楼」和朋友们讨论有趣的话题，你⼀起来吧？ 拾陆楼知识星球入口 已知某模块的DCG结果显示存在congestion，有congestion部分逻辑结构如下图: 问题1: 如何分析该电路有congestion问题的原因？ 答：data selecti…...
数据结构：交换排序
冒泡排序 起泡排序，别名“冒泡排序”，该算法的核心思想是将无序表中的所有记录，通过两两比较关键字，得出升序序列或者降序序列。 算法步骤 比较相邻的元素。如果第一个元素大于第二个元素，就交换它们。对每一对相邻…...
SpringBoot复习：（42）WebServerCustomizer的customize方法是在哪里被调用的？
ServletWebServletAutoConfiguration类定义如下： 可以看到其中通过Import注解导入了其内部类BeanPostProcessorRegister。 BeanPostProcessor中定义的registerBeanDefinition方法会被Spring容器调用。 registerBeanDefinitions方法调用了RegistrySyntheticBeanIf…...
年至年的选择仿elementui的样式
组件：<!--* Author: liuyu liuyuxizhengtech.com* Date: 2023-02-01 16:57:27* LastEditors: wangping wangpingxizhengtech.com* LastEditTime: 2023-06-30 17:25:14* Description: 时间选择年 - 年 --> <template><div class"yearPicker"…...
分类过程中的一种遮挡现象
( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有3个节点，AB训练集各由6张二值化的图片组成，让A，B中各有3个点，且不重合，统计迭代次数并排序。 其中有10组数据 差值结构 迭代次数 构造平均列A 构造平均列AB…...
下一代服务架构：单体架构--＞分布式架构--＞微服务(DDD)--＞软件定义架构(SDF with GraphEngine)
参考：自己实现一个SQL解析引擎_曾经的学渣的博客-CSDN博客...
excel 之 VBA
1、excel和VBA 高效办公，把重复性的工作写成VBA代码（VB代码的衍生物，语法和VBA相同）。 首先打开开发工具模式，如果没有选显卡，需要手动打开 打开程序编辑界面 快捷键 altF11一般操作 程序调试…...
【数学建模】--聚类模型
聚类模型的定义： “物以类聚，人以群分”，所谓的聚类，就是将样本划分为由类似的对象组成的多个类的过程。聚类后，我们可以更加准确的在每个类中单独使用统计模型进行估计，分析或预测；也可以探究不…...
css3新增选择器总结
目录 一、属性选择器 二、结构伪类选择器 三、伪元素选择器 四、UI状态伪类选择器 五、反选伪类选择器 六、target选择器 七、父亲选择器、后代选择器 八、相邻兄弟选择器、兄弟们选择器 一、属性选择器 （除IE6外的大部分浏览器支持） E&#…...
0基础学C#笔记10：归并排序法
文章目录 前言一、递归的方式二、代码总结 前言 将一个大的无序数组有序，我们可以把大的数组分成两个，然后对这两个数组分别进行排序，之后在把这两个数组合并成一个有序的数组。由于两个小的数组都是有序的，所以在合并的时候是很…...
nlohmann json：通过for遍历object和array
object和array可以使用数for进行遍历： #include <iostream> #include <nlohmann/json.hpp> using namespace std; using json = nlohmann::json;auto checkJsonType(json& x) {if(x.type() == json::value_t::null){cout<<x<<" is null&quo…...
适配器模式：将不兼容的接口转换为可兼容的接口
适配器模式：将不兼容的接口转换为可兼容的接口 什么是适配器模式？ 适配器模式是一种结构型设计模式，用于将一个类的接口转换为客户端所期望的另一个接口。它允许不兼容的类能够合作，使得原本由于接口不匹配而无法工作的类能够一…...
【量化课程】07_量化回测
文章目录 7.1 pandas计算策略评估指标数据准备净值曲线年化收益率波动率最大回撤Alpha系数和Beta系数夏普比率信息比率 7.2 聚宽平台量化回测实践平台介绍策略实现 7.3 Backtrader平台量化回测实践Backtrader简介Backtrader量化回测框架实践 7.4 BigQuant量化框架实战BigQuant简…...
竞赛项目 深度学习花卉识别 - python 机器视觉 opencv
文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 &a…...
用对角线去遍历矩阵
声明 该系列文章仅仅展示个人的解题思路和分析过程，并非一定是优质题解，重要的是通过分析和解决问题能让我们逐渐熟练和成长，从新手到大佬离不开一个磨练的过程，加油！ 原题链接 用对角线遍历矩阵https://leetcode.c…...
【vue】点击按钮弹出卡片，点击卡片中的取消按钮取消弹出的卡片（附代码）
实现思路： 在按钮上绑定一个点击事件，默认是true；在export default { }中注册变量给卡片标签用v-if判断是否要显示卡片，ture则显示；在卡片里面写好你想要展示的数据；给卡片添加一个取消按钮，绑…...
【K8S】pod 基础概念讲解
目录 Pod基础概念：在Kubrenetes集群中Pod有如下两种使用方式：pause容器使得Pod中的所有容器可以共享两种资源：网络和存储。总结：kubernetes中的pause容器主要为每个容器提供以下功能：Kubernetes设计这样的Pod概念和特殊…...
IPFS去中心化存储实战指南：黑马程序员音乐播放器项目开发完整教程
IPFS去中心化存储实战指南：黑马程序员音乐播放器项目开发完整教程 【免费下载链接】BlockChain 黑马程序员 120天全栈区块链开发 开源教程 项目地址: https://gitcode.com/gh_mirrors/blockchain95/BlockChain 你是否想过如何构建一个真正去中心化的音乐播放…...
【DeepSeek-R1代码相似度引擎解密】：3层语义比对机制、Token归一化偏差修正与Jaccard阈值黄金分割点
更多请点击： https://kaifayun.com 第一章：DeepSeek代码重复检测 DeepSeek-R1 模型在训练过程中引入了严格的代码去重机制，其核心目标是消除训练语料中语义等价或高度相似的代码片段，从而提升模型对真实编程模式的学习能力与泛化…...
2026 新视角:化妆品开发的底层逻辑，做好一款产品，从选对原料开始
在化妆品研发链条中，配方架构、生产工艺、包装设计固然重要，但决定一款产品上限的，永远是原料。一款稳定、安全、表现优异的护肤成品，离不开纯净、达标、批次一致的优质原料。对于品牌方、配方师、代工企业而言，原料不…...
从入门到实践：EEG公开数据集分类与应用场景全解析
1. EEG公开数据集入门指南刚接触脑电信号分析的研究者，常常会被一个问题困扰："我应该从哪里获取可靠的EEG数据？"作为一个在这个领域摸爬滚打多年的研究者，我完全理解这种困惑。记得我第一次接触EEG研究时，光…...
METSO A413248自动化系统
METSO A413248 自动化系统模块产品特点： 品牌归属：芬兰METSO（美卓）工业自动化系统原装备件。 产品类型：工业级自动化控制模块/接口模块。 核心功能：用于控制信号处理、数据采集及系统集成。 系统兼容&am…...
保姆级教程：Windows系统下Arcgis 10.2从下载、安装到汉化一次搞定（附常见License启动失败解决方案）
Windows系统下Arcgis 10.2完整安装与汉化实战指南第一次接触Arcgis的新手往往会被复杂的安装流程和神秘的License Manager搞得晕头转向。作为一款功能强大的地理信息系统软件，Arcgis在科研、城市规划、环境监测等领域有着广泛应用，但它的安装过程确实会让…...
解密高校教师必会的Gemini 3.1 Pro五大科研隐藏技能：从论文评估到创新点锁定
各位同仁好，我是七哥。一个在高校里从事人工智能相关领域研究，钻研用大模型AI实操的学术人。可以和七哥交流学术写作或Gemini、GPT、Claude等大模型学术实操相关问题，多多交流，相互成就，共同进步。 科研路上，有人发完顶刊顺利晋升，有人还在为创新点抓耳挠腮。 大多数教…...
Graphin高级应用：结合GISDK构建配置化图分析模块的完整指南
Graphin高级应用：结合GISDK构建配置化图分析模块的完整指南 【免费下载链接】Graphin 🌌 A React toolkit for graph visualization based on G6. 项目地址: https://gitcode.com/gh_mirrors/gr/Graphin 在当今数据驱动的时代，图可视化…...
高精度光照检测
光线检测仪，kotlin开发，调用手机感光模块检测室内外光照强度，用途多多，我主要用途孩子写作业检测光照保护视力。 食用方法∶打开即测，速度快，无广告，手机平视即可，无须直视光线。 买…...
AutoPentest：面向红队的渗透测试决策引擎架构解析
1. 这不是又一个“自动化扫描器”，而是一套能替你做决策的渗透测试工作流引擎AutoPentest这个名字，第一眼容易让人联想到Nmap加个for循环、或者Burp Suite里点几下Intruder——但实际用过的人很快会意识到：它根本不在同一个维度上。我第一次在…...