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

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

Vue3的组合式API是使用setup函数来编写组件逻辑的。setup函数是Vue3中用于替代Vue2的选项API(如datamethods等)的一种方式。在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&#xff08;如data、methods等&#xff09;的一种方式。在setup函数中&#xff0c;你可以访问到一些特殊的响应式对象&#xff0c;并且可以返回一些可以在模板中使用的数据、方法等。…...

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

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

Java基础篇--Runtime类

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

数字后端笔试题(1)DCG后congestion问题

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

数据结构:交换排序

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

SpringBoot复习:(42)WebServerCustomizer的customize方法是在哪里被调用的?

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

年至年的选择仿elementui的样式

组件&#xff1a;<!--* 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个节点&#xff0c;AB训练集各由6张二值化的图片组成&#xff0c;让A&#xff0c;B中各有3个点&#xff0c;且不重合&#xff0c;统计迭代次数并排序。 其中有10组数据 差值结构 迭代次数 构造平均列A 构造平均列AB…...

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

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

excel 之 VBA

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

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

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

css3新增选择器总结

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

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

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

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

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

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

【量化课程】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 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &a…...

用对角线去遍历矩阵

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

【vue】点击按钮弹出卡片,点击卡片中的取消按钮取消弹出的卡片(附代码)

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

【K8S】pod 基础概念讲解

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

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

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

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

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

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

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

Redis数据倾斜问题解决

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

Swagger和OpenApi的前世今生

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

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

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...