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

直接在html中引入Vue.js的cdn来实现Vue3的组合式API

news 2026/2/10 8:59:52

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)]

演示

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函数中，你可以访问到一些特殊的响应式对象，并且可以返回一些可以在模板中使用的数据、方法等。…...

编程日记 2023/8/14 13:16:17

YAPi在线接口文档简单案例（结合Vue前端Demo）

在前后端分离开发中，我们都是基于文档进行开发，那前端人员有时候无法马上拿到后端的数据，该怎么办？我们一般采用mock模拟伪造数据直接进行测试，本篇文章主要介绍YApi在线接口文档的简单使用，并结合Vue的小d…...

编程日记 2023/8/14 13:15:16

Java基础篇--Runtime类

介绍 Runtime类用于表示虚拟机运行时的状态，它用于封装JVM虚拟机进程。每次使用java命令启动虚拟机都对应一个Runtime实例，并且只有一个实例。因此在Runtime类定义的时候，它的构造方法已经被私有化了(单例设计模式的应用)，对象…...

编程日记 2023/8/14 13:14:14

数字后端笔试题（1）DCG后congestion问题

我正在「拾陆楼」和朋友们讨论有趣的话题，你⼀起来吧？ 拾陆楼知识星球入口已知某模块的DCG结果显示存在congestion，有congestion部分逻辑结构如下图: 问题1: 如何分析该电路有congestion问题的原因？ 答：data selecti…...

编程日记 2023/8/14 13:13:12

数据结构：交换排序

冒泡排序起泡排序，别名“冒泡排序”，该算法的核心思想是将无序表中的所有记录，通过两两比较关键字，得出升序序列或者降序序列。算法步骤比较相邻的元素。如果第一个元素大于第二个元素，就交换它们。对每一对相邻…...

编程日记 2023/8/14 13:12:09

SpringBoot复习：（42）WebServerCustomizer的customize方法是在哪里被调用的？

ServletWebServletAutoConfiguration类定义如下： 可以看到其中通过Import注解导入了其内部类BeanPostProcessorRegister。 BeanPostProcessor中定义的registerBeanDefinition方法会被Spring容器调用。 registerBeanDefinitions方法调用了RegistrySyntheticBeanIf…...

编程日记 2023/8/14 13:11:08

年至年的选择仿elementui的样式

组件： <template><div class"yearPicker"…...

编程日记 2023/8/14 13:10:07

分类过程中的一种遮挡现象

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有3个节点，AB训练集各由6张二值化的图片组成，让A，B中各有3个点，且不重合，统计迭代次数并排序。其中有10组数据差值结构迭代次数构造平均列A 构造平均列AB…...

编程日记 2023/8/14 13:09:05

下一代服务架构：单体架构--＞分布式架构--＞微服务(DDD)--＞软件定义架构(SDF with GraphEngine)

参考：自己实现一个SQL解析引擎_曾经的学渣的博客-CSDN博客...

编程日记 2023/8/14 13:08:03

excel 之 VBA

1、excel和VBA 高效办公，把重复性的工作写成VBA代码（VB代码的衍生物，语法和VBA相同）。首先打开开发工具模式，如果没有选显卡，需要手动打开打开程序编辑界面快捷键 altF11一般操作程序调试&#xf…...

编程日记 2023/8/14 13:07:02

【数学建模】--聚类模型

聚类模型的定义： “物以类聚，人以群分”，所谓的聚类，就是将样本划分为由类似的对象组成的多个类的过程。聚类后，我们可以更加准确的在每个类中单独使用统计模型进行估计，分析或预测；也可以探究不…...

编程日记 2023/8/14 13:06:01

css3新增选择器总结

目录一、属性选择器二、结构伪类选择器三、伪元素选择器四、UI状态伪类选择器五、反选伪类选择器六、target选择器七、父亲选择器、后代选择器八、相邻兄弟选择器、兄弟们选择器一、属性选择器 （除IE6外的大部分浏览器支持） E&#…...

编程日记 2023/8/14 13:04:59

0基础学C#笔记10：归并排序法

文章目录前言一、递归的方式二、代码总结前言将一个大的无序数组有序，我们可以把大的数组分成两个，然后对这两个数组分别进行排序，之后在把这两个数组合并成一个有序的数组。由于两个小的数组都是有序的，所以在合并的时候是很…...

编程日记 2023/8/14 13:03:58

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…...

编程日记 2023/8/14 13:02:56

适配器模式：将不兼容的接口转换为可兼容的接口

适配器模式：将不兼容的接口转换为可兼容的接口什么是适配器模式？ 适配器模式是一种结构型设计模式，用于将一个类的接口转换为客户端所期望的另一个接口。它允许不兼容的类能够合作，使得原本由于接口不匹配而无法工作的类能够一…...

编程日记 2023/8/14 13:01:55

【量化课程】07_量化回测

文章目录 7.1 pandas计算策略评估指标数据准备净值曲线年化收益率波动率最大回撤Alpha系数和Beta系数夏普比率信息比率 7.2 聚宽平台量化回测实践平台介绍策略实现 7.3 Backtrader平台量化回测实践Backtrader简介Backtrader量化回测框架实践 7.4 BigQuant量化框架实战BigQuant简…...

编程日记 2023/8/14 13:00:53

竞赛项目深度学习花卉识别 - python 机器视觉 opencv

文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 &a…...

编程日记 2023/8/14 12:59:51

用对角线去遍历矩阵

声明该系列文章仅仅展示个人的解题思路和分析过程，并非一定是优质题解，重要的是通过分析和解决问题能让我们逐渐熟练和成长，从新手到大佬离不开一个磨练的过程，加油！ 原题链接用对角线遍历矩阵https://leetcode.c…...

编程日记 2023/8/14 12:58:51

【vue】点击按钮弹出卡片，点击卡片中的取消按钮取消弹出的卡片（附代码）

实现思路： 在按钮上绑定一个点击事件，默认是true；在export default { }中注册变量给卡片标签用v-if判断是否要显示卡片，ture则显示；在卡片里面写好你想要展示的数据；给卡片添加一个取消按钮，绑…...

编程日记 2023/8/14 12:57:50

【K8S】pod 基础概念讲解

目录 Pod基础概念：在Kubrenetes集群中Pod有如下两种使用方式：pause容器使得Pod中的所有容器可以共享两种资源：网络和存储。总结：kubernetes中的pause容器主要为每个容器提供以下功能：Kubernetes设计这样的Pod概念和特殊…...

编程日记 2023/8/14 12:56:48

wordpress后台更新后前端没变化的解决方法

使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...

编程新知 2026/2/9 2:42:46

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...

编程新知 2025/10/6 16:38:04

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums，返回数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积。题目数据保证数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位整数范围内。请不要使用除法，且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。数据倾斜的主要表现部分节点内存使用率远高于其他节…...

编程新知 2026/1/27 19:28:11

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章，二者共同塑造了现代RESTful API的开发范式。本期就扒一扒其技术演进的关键节点与核心逻辑： 🔄 一、起源与初创期：Swagger的诞生（2010-2014） 核心…...

编程新知 2026/1/25 9:08:41

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46