html中如何用vue语法，并使用UI组件库 ，html中引入vue+ant-design-vue或者vue+element-plus

news2024/11/30 3:48:40

html中如何用vue语法，并使用UI组件库

前言
先说一下本次应用的场景，本次项目中，需要引入github中别人写好的插件，插件比较大，没有方法直接在自己项目中，把别人的项目打包合并生成html（类似于前端项目打包生成的 dist ），修改这里面的html，这种情况要么用原生js写或者jquery还相对快一些，那为什么不直接用vue语法呢？哈哈哈，下面就教你怎么写。

首先你要有vue3对应的js文件和antd组件库对应的文件，要么就用cdn

vue3 + ant-design-vue

这里用antDesignVue4.0
直接上代码，相信你可以看懂的
注意看 ant-design-vue官网
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3语法模板</title>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/element-plus"></script> -->

    <script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
    <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
    <link rel="stylesheet" type="text/css" href="./ant/antd.reset.css" media="screen">
    <script src="./ant/antd.js"></script>
</head>
<style>
</style>

<body>
    <div style="width:100%;" id="app">
        <div>{{exp_id}}</div>
        <div>{{fullNum}}</div>
        <div v-for="item in dateTime" :key="item">{{item}}</div>
        <a-button type="primary" @click="upload('更新')">更新</a-button>
        <a-button type="dashed" @click="sets('恢复')">恢复</a-button>
        <a-button danger @click="dialog">打开弹框</a-button>
        <div>
            <a-select v-model="value" class="m-2" placeholder="Select" size="large">
                <a-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </a-select>
        </div>
       
    </div>
</body>

</html>
<script>
    Object.assign(window, Vue);
    const vue3Composition = {
        setup() {
            // 变量部分
            const data = reactive({
                exp_id: '虚拟实验id',
                dateTime: [1, 2, 3, 4, 5],
                value: '',
                dialogVisible: false,
                options: [{
                        value: 'Option1',
                        label: 'Option1',
                    },
                    {
                        value: 'Option2',
                        label: 'Option2',
                    }
                ]
            });
            // toRef: 复制 reactive 里的单个属性并转成 ref
            // toRefs: 复制 reactive 里的所有属性并转成 ref
            const dataRef = toRefs(data)
            // 监听
            watch(dataRef.exp_id, (newName, oldName) => {
                console.log("新数据", newName);
                console.log("老数据", oldName);
            })
            // 计算属性
            dataRef.fullNum = computed(() => {
                return dataRef.value
            });
            // 生命周期 mounted
            onMounted(() => {
                console.log(`我是Mounted生命周期`)
            })
            // 函数部分
            const methods = reactive({
                upload(e) {
                    dataRef.exp_id.value = '修改'
                    dataRef.dateTime.value = [8, 9, 10, 11, 12]
                    //this.dialog() //调用其他方法加this可以调用到
                },
                sets(e) {
                    dataRef.exp_id.value = '虚拟实验id'
                    dataRef.dateTime.value = [1, 2, 3, 4, 5]
                },
                dialog() {
                    dataRef.dialogVisible.value = true
                }
            })
            return {
                ...dataRef,
                ...methods
            }
        },
    }
    const app = createApp(vue3Composition).use(antd).mount("#app");//初始化
</script>

vue2 + element-plus

这里对应的vuejs我下载到本地了，自己去cdn上面找一个就好了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2语法模板</title>
    <!-- <script src="https://unpkg.com/vue@next"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/element-plus"></script> -->
    <script src="./vue2/vue2.js"></script>
    <script src="./vue2/element-ui/index.js"></script>
    <link rel="stylesheet" href="./vue2/element-ui/index.css" />
</head>
<style>
</style>

<body>
    <div style="width:100%;" id="app">
        <div>{{activeType}}</div>
        <div>{{fullNum}}</div>
        <div v-for="item in dateTime" :key="item">{{item}}</div>
        <el-button type="primary" @click="upload('更新')">更新</el-button>
        <el-button type="success" @click="sets('恢复')">恢复</el-button>
        <el-button type="warning" @click="dialog">打开弹框</el-button>
        <div>
            <el-select v-model="value" class="m-2" placeholder="Select" size="large">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
    </div>
</body>

</html>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                //左边菜品类别index
                activeType: 0,
                categoryList: [],
                categoryId: undefined,
            }
        },
        computed: {

        },
        created() {
        },
        watch: {

        },
        mounted() {
            this.initData()
        },
        methods: {




        }
    })

</script>

vue3 + element-plus

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3语法模板</title>
    <script src="https://unpkg.com/vue@next"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/element-plus"></script>
</head>
<style>
</style>

<body>
    <div style="width:100%;" id="app">
        <div>{{exp_id}}</div>
        <div>{{fullNum}}</div>
        <div v-for="item in dateTime" :key="item">{{item}}</div>
        <el-button type="primary" @click="upload('更新')">更新</el-button>
        <el-button type="success" @click="sets('恢复')">恢复</el-button>
        <el-button type="warning" @click="dialog">打开弹框</el-button>
        <div>
            <el-select v-model="value" class="m-2" placeholder="Select" size="large">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <el-dialog v-model="dialogVisible" title="Tips" width="30%">
            <span>This is a message</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        Confirm
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</body>

</html>
<script>
    Object.assign(window, Vue);
    const vue3Composition = {
        setup() {
            // 变量部分
            const data = reactive({
                exp_id: '虚拟实验id',
                dateTime: [1, 2, 3, 4, 5],
                value: '',
                dialogVisible: false,
                options: [{
                        value: 'Option1',
                        label: 'Option1',
                    },
                    {
                        value: 'Option2',
                        label: 'Option2',
                    }
                ]
            });
            // toRef: 复制 reactive 里的单个属性并转成 ref
            // toRefs: 复制 reactive 里的所有属性并转成 ref
            const dataRef = toRefs(data)
            // 监听
            watch(dataRef.exp_id, (newName, oldName) => {
                console.log("新数据", newName);
                console.log("老数据", oldName);
            })
            // 计算属性
            dataRef.fullNum = computed(() => {
                return dataRef.value
            });
            // 生命周期 mounted
            onMounted(() => {
                console.log(`我是Mounted生命周期`)
            })
            // 函数部分
            const methods = reactive({
                upload(e) {
                    dataRef.exp_id.value = '修改'
                    dataRef.dateTime.value = [8, 9, 10, 11, 12]
                    //this.dialog() //调用其他方法加this可以调用到
                },
                sets(e) {
                    dataRef.exp_id.value = '虚拟实验id'
                    dataRef.dateTime.value = [1, 2, 3, 4, 5]
                },
                dialog() {
                    dataRef.dialogVisible.value = true
                }
            })
            return {
                ...dataRef,
                ...methods
            }
        },
    }
    const app = createApp(vue3Composition).use(ElementPlus).mount("#app");//初始化
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/951512.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

阿里云效和阿里在线idea使用

阿里云效和阿里在线idea使用

阿里云效 https://flow.aliyun.com/all?page1 阿里在线idea&#xff1a;https://ide.aliyun.com/ 在云效中创建的项目可以在在线idea 打开 运行中的项目 设置ssh 设置以后可以使用云效率的代码构建来构建代码 设置 添加自有云或者体验5h
阅读更多...
十五、模板方法模式

十五、模板方法模式

一、什么是模板方法模式 模板方法&#xff08;Template Method&#xff09;模式的定义如下&#xff1a;定义一个操作中的算法骨架&#xff0c;而将算法的一些步骤延迟到子类中&#xff0c;使得子类可以不改变该算法结构的情况下重定义该算法的某些特定步骤。 模板方法模式包含以…
阅读更多...
postgis数据库从一张表中过滤出一部分数据到新表中

postgis数据库从一张表中过滤出一部分数据到新表中

你可以使用以下步骤在PostGIS数据库中过滤objectid<100的数据&#xff0c;并将其创建为新表&#xff1a;打开PostGIS数据库的终端或客户端工具&#xff08;如Psql&#xff09;。 选择你要过滤数据的表。假设表名为"original_table"&#xff0c;该表包含一个名为&q…
阅读更多...
netmap安装使用

netmap安装使用

文章目录 1、安装编译netmap2、使用netmap3、运行编写自己的代码 1、安装编译netmap github地址 git clone https://github.com/luigirizzo/netmap 1、进入目录 cd netmap-master/LINUX 2、安装编译环境 apt-get install build-essential 3、初始化配置环境 ./configure 出现这…
阅读更多...
若依富文本 html样式 被过滤问题

若依富文本 html样式 被过滤问题

一.场景 进入页面&#xff0c;富文本编辑框里回显这条新闻内容&#xff0c;如下图&#xff0c; 然后可以在富文本编辑框里对它实现再编辑&#xff0c;编辑之后将html代码提交保存到后台数据库。可以点击详情页进行查看。 出现问题&#xff1a;在提交到后台controller时&#x…
阅读更多...
Spring Boot 中是使用 JDK Proxy 动态代理还是 CGLib ?

Spring Boot 中是使用 JDK Proxy 动态代理还是 CGLib ?

1. Spring Boot 中是使用 JDK Proxy 动态代理还是 CGLib ? 首先我们知道在 Spring 里面&#xff0c;动态代理的底层&#xff0c;默认使用的是 JDK Proxy 代理&#xff0c;这一点在官方文档有具体的说明&#xff1a; 既然 Spring 中的动态代理默认使用 JDK Proxy&#xff0c;那…
阅读更多...
交换机端口安全实验

交换机端口安全实验

文章目录 一、实验的背景与目的二、实验拓扑三、实验需求四、实验解法1. PC配置IP地址部分2. 在SW1上开启802.1X身份验证3. 创建一个用户身份验证的用户。用户名为wangdaye&#xff0c;密码为1234564.创建一个端口隔离组&#xff0c;实现三台PC无法互相访问 摘要&#xff1a; 本…
阅读更多...
记录 使用 git 克隆仓库报错：Warning: Permanently added‘github.com’ to the .....（ssh ）

记录 使用 git 克隆仓库报错：Warning: Permanently added‘github.com’ to the .....（ssh ）

解决方法&#xff1a; 1. 新建空文件夹->右键->点击 Git Bash Here2. 输入 cd C&#xff1a;3. 输入 cat ~/.ssh/id_rsa.pub4. 输入 ssh-keygen重复回车&#xff0c;生成一个矩形&#xff0c;则说明公钥已经生成了。重复步骤3&#xff0c;生成publickey&#xff0c;右键…
阅读更多...
PCL 判断两条线段的平行性（三维空间）

PCL 判断两条线段的平行性（三维空间）

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 这里使用一种比较有趣的方式来判断三维空间中两条线段的平行性，我们都知道两条线段所代表的矢量进行叉乘计算所得数值，代表了由这两条线段组成的平行四边形的面积值，如下图所示： ok，那么如果将此结论推广到三维…
阅读更多...
远程工作与协作实践：探讨在网络安全领域中进行远程工作和团队协作的最佳实践和工具推荐

远程工作与协作实践：探讨在网络安全领域中进行远程工作和团队协作的最佳实践和工具推荐

第一章&#xff1a;引言 随着科技的迅猛发展&#xff0c;远程工作已经成为现代职场的一部分。特别是在网络安全领域&#xff0c;远程工作和团队协作变得越来越普遍。本文将探讨在网络安全领域中进行远程工作和团队协作的最佳实践和工具推荐&#xff0c;帮助从业人员更好地应对…
阅读更多...
26.仪表板侧边栏菜单

26.仪表板侧边栏菜单

效果 源码 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sidebar Menu</title> <link rel="stylesheet" type="text/css"…
阅读更多...
DNS原理

DNS原理

文章目录 一、域名产生背景域名的树形层次化结构 二、定义三、DNS查询模式递归查询迭代查询 四、主机域名解析工作流程五、H3C配置DNS代理 首先可以看下思维导图&#xff0c;以便更好的理解接下来的内容。 一、域名 产生背景 在互联网中&#xff0c;通过IP地址访问目标主机…
阅读更多...
如何使用Unity制作一个国际象棋

如何使用Unity制作一个国际象棋

LinnoChess1.0 该项目旨在做一些Unity小游戏项目开发来练练手 如果有更新建议请私信RWLinno 项目地址&#xff1a;https://github.com/RWLinno/LinnoChess 目前效果 能够正常下棋&#xff1b;能够编辑棋盘&#xff1b;能够SL棋局&#xff1b;能够记录棋谱&#xff1b;能够显…
阅读更多...
交换机端口安全

交换机端口安全

文章目录 一、802.1X认证1. 定义和起源2. 认证方式本地认证远程集中认证 3. 端口接入控制方式基于端口认证基于MAC地址认证 二、端口隔离技术1. 隔离组2. 隔离原理3. 应用场景 首先可以看下思维导图&#xff0c;以便更好的理解接下来的内容。 一、802.1X认证 1. 定义和起源 8…
阅读更多...
使用PAM保障开发运营安全

使用PAM保障开发运营安全

硬编码凭据和 DevOps 系统中缺乏凭据安全性是组织的巨大漏洞。以明文形式访问凭据的恶意内部人员可以在 IT 中建立和扩展其立足点 基础设施&#xff0c;构成巨大的数据被盗风险。 什么是PAM 特权访问管理 &#xff08;PAM&#xff09; 是指一组 IT 安全管理原则&#xff0c;可…
阅读更多...
全球热喷涂设备预计将以超过4.6%的增长率增长！

全球热喷涂设备预计将以超过4.6%的增长率增长！

热喷涂设备是一种用于将涂层材料喷涂在不同基材表面的技术和设备。这些设备使用热源来将涂层材料加热到熔化或半熔化状态&#xff0c;然后将其喷射到基材上&#xff0c;形成涂层。这种涂层技术可以为基材提供防护、增强、修复和装饰等功能。 根据阿谱尔&#xff08;APO&#x…
阅读更多...
淘宝商品API使用示例：如何通过调用外部API来获取淘宝商品价格销量主图详情数据

淘宝商品API使用示例：如何通过调用外部API来获取淘宝商品价格销量主图详情数据

淘宝上的商品信息量非常之大&#xff0c;商品的详情信息也很齐全。如何通过调用外部API来实现批量获取商品价格销量主图详情等信息呢&#xff1f;上周刚好完成了一个完整的淘宝商品采集项目&#xff0c;今天特来分享一下。 接口名称&#xff1a;item_get 请求地址&#xff1a…
阅读更多...
【java 入侵 C# 之路】1-入门

【java 入侵 C# 之路】1-入门

感谢 https://www.cnblogs.com/mww-NOTCOPY/p/12213373.html 百度百科 jvm对应clr java se runtime对应 .net framework&#xff0c; jdk对应 .net framework sdk&#xff0c; java对应C# .NET 是开发者平台&#xff0c;它包含开发环境、技术框架、社区论坛、服务支持等&…
阅读更多...
fastadmin think-queue supervisor配置

fastadmin think-queue supervisor配置

起因是微信支付回调需要同时做发货处理&#xff0c;但是发货接口不能影响,需要队列进行异步处理1. 1.fastadmin 后台购买queue插件(基于think-queue消息队列) 2.代码 2.1 添加文件&#xff1a;application---->extra--->queue.php 内容&#xff1a;我这里用的数据库做…
阅读更多...
[机器学习]分类算法系列①：初识概念

[机器学习]分类算法系列①：初识概念

目录 1、概念 2、数据集介绍与划分 2.1、数据集的划分 2.2、sklearn数据集介绍 2.2.1、API 2.2.2、分类和回归数据集 分类数据集 回归数据集 返回类型 3、sklearn转换器和估计器 3.1、转换器 三种方法的区别 3.2、估计器 3.2.1、简介 3.2.2、API 3.3、工作流程 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023