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

【Web - 框架 - Vue】随笔 - 通过`CDN`的方式使用`VUE 2.0`和`Element UI`

通过CDN的方式使用VUE 2.0Element UI

VUE

网址

https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js

源码

https://download.csdn.net/download/HIGK_365/88815507

测试

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div><h1>{{info}}</h1>
</div>
<script src="vue.js"></script>
<script>let v = new Vue({el:"div",data:{info:"Hello Vue!"}})
</script>
</body>
</html>

结果

在这里插入图片描述

Element UI

网址

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

源码

https://download.csdn.net/download/HIGK_365/88815554

测试

代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><!-- import CSS --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app"><el-button @click="visible = true">Button</el-button><el-dialog :visible.sync="visible" title="Hello world"><p>Try Element</p></el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>new Vue({el: '#app',data: function () {return {visible: false}}})
</script>
</html>

结果

在这里插入图片描述
在这里插入图片描述

相关文章:

【Web - 框架 - Vue】随笔 - 通过`CDN`的方式使用`VUE 2.0`和`Element UI`

通过CDN的方式使用VUE 2.0和Element UI VUE 网址 https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js源码 https://download.csdn.net/download/HIGK_365/88815507测试 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset&quo…...

设计模式(行为型模式)备忘录模式

目录 一、简介二、备忘录模式2.1、备忘录2.2、原发器2.3、备忘录模式 三、优点与缺点 一、简介 备忘录模式&#xff08;Memento Pattern&#xff09;是一种行为设计模式&#xff0c;旨在捕获一个对象的内部状态&#xff0c;并在不破坏对象封装的前提下将其保存&#xff0c;以便…...

opencv案例实战:条码区域分割

前言 识别二维码是一个日常生活中常见的应用,而识别之前,需要先分割出条形码的区域来获取条形码。我们可以使用OpenCV便捷的获取条码的区域。 逐步分析 为了了解数据处理的过程,我们逐步分析并显示处理过程 查看图像 在读入时,传入参数cv2.IMREAD_GRAYSCALE可以直接按…...

《MySQL》超详细笔记

目录 基本知识 主流数据库 数据库基本概念 MySQL启动 数据库基本命令 数据库 启动数据库 显示数据库 创建数据库 删除数据库 使用数据库 查询当前数据库信息 显示数据库中的表 导入数据库脚本 表 查看表的结构 查看创建某个表的SQL语句 数据库的查询命令 查询…...

商用密码

商用密码&#xff08;Commercial Cryptography&#xff09;涉及到多个方面&#xff0c;包括但不限于数据加密、数字签名、身份验证和安全通信等。商用密码的目的是保护信息的机密性、完整性和可用性&#xff0c;确保数据在存储和传输过程中的安全。以下是一些Java商用密码方向的…...

css1文本属性

一.颜色&#xff08;color&#xff09;&#xff08;一般用16进制&#xff09; 二.对齐&#xff08;text-align) 三.装饰&#xff08;text-decoration&#xff09; 四.缩进&#xff08;text-indent&#xff09;&#xff08;一般用2em&#xff09;&#xff08;有单位&#xff09;…...

在容器中使用buildah构建镜像

简介 buildah是一个构建OCI标准镜像的工具&#xff0c;可以用来替代docker build 在常见的linux发行版中可直接通过包管理工具安装使用 # centos yum install buildah# ubuntu/debian apt install buildah# alpine apk add buildah其他发行版安装方法详见 github&#xff0c…...

GPT4_VS_ChatGPT(from_nytimes)

GPT4 VS ChatGPT&#xff08;from nytimes &#xff09; 正如文章官网博文&#xff1a;https://openai.com/research/gpt-4所述&#xff0c;GPT4仍有很多不足之处&#xff0c;还不及人类水平。纽约时报报道了一些人体验GPT4的效果和一些评价&#xff1a; Cade Metz 要求专家使…...

中兴R5300G4服务器查看服务器、主板序列号及硬盘RAID信息

本文在操作系统带内通过指令操作查看中兴R5300G4服务器、主板序列号及硬盘RAID信息。 一、中兴R5300G4服务器查看服务器、主板序列号 在Linux服务器上&#xff0c;可以使用dmidecode命令来查看服务器的硬件相关信息&#xff0c;由于该命令要读取系统的硬件信息&#xff0c;因…...

部署tomcat

1 idea打包完&#xff0c;找到target目录下的网站 我的叫做 test.webSYS 2 linux 安装 tomcat 后 修改conf下的server.xml中的Connector的port <Connector port"9001" protocol"HTTP/1.1"connectionTimeout"20000"redirectPort"8443…...

【Java 数据结构】枚举

枚举的使用 1 背景及定义2 使用3 枚举优点缺点4 枚举和反射4.1 枚举是否可以通过反射&#xff0c;拿到实例对象呢&#xff1f; 5 总结面试问题(单例模式学完后可以回顾)&#xff1a; 1 背景及定义 public static final int RED 1; public static final int GREEN 2; public …...

Python(20)正则表达式(Regular Expression)中常用函数用法

大家好&#xff01;我是码银&#x1f970; 欢迎关注&#x1f970;&#xff1a; CSDN&#xff1a;码银 公众号&#xff1a;码银学编程 正文 正则表达式 粗略的定义&#xff1a;正则表达式是一个特殊的字符序列&#xff0c;帮助用户非常便捷的检查一个字符串是否符合某种模…...

docker 离线安装镜像

一、导出镜像 下载完镜像后&#xff0c;我们需要将其导出为tar文件&#xff0c;以便在离线环境中使用。 执行以下命令导出镜像&#xff1a; docker save -o <保存路径>/<镜像名>_<版本>.tar <镜像名>:<版本>其中&#xff0c;<保存路径>是…...

由vscode自动升级导致的“终端可以ssh服务器,但是vscode无法连接服务器”

问题描述 简单来说就是&#xff0c;ssh配置没动&#xff0c;前两天还可以用vscode连接服务器&#xff0c;今天突然就连不上了&#xff0c;但是用本地终端ssh可以顺利连接。 连接情况 我的ssh配置如下&#xff1a; Host gpu3HostName aaaUser zwx现在直接在终端中进行ssh&am…...

typecho 在文章中添加 bilibili 视频

一、获取视频来源&#xff1a; 可以有2种方式来定位一个 bilibili 视频&#xff1a; 第一种是使用 bvid 参数定位第二种是使用 aid 参数定位 如何获取这两个参数&#xff1f; 首先我们可以看看 bilibili 网站中的视频页面链接其实可以分为两种&#xff1a; 第一种是类似&a…...

Android.mk 语法详解

一.Android.mk简介 Android.mk 是Android 提供的一种makefile 文件,注意用来编译生成&#xff08;exe&#xff0c;so&#xff0c;a&#xff0c;jar&#xff0c;apk&#xff09;等文件。 二.Android.mk编写 分析一个最简单的Android.mk LOCAL_PATH : $(call my-dir) //定义了…...

ChatGPT高效提问—prompt基础

ChatGPT高效提问—prompt基础 ​ 设计一个好的prompt对于获取理想的生成结果至关重要。通过选择合适的关键词、提供明确的上下文、设置特定的约束条件&#xff0c;可以引导模型生成符合预期的回复。例如&#xff0c;在对话中&#xff0c;可以使用明确的问题或陈述引导模型生成…...

Elasticsearch 中的索引的分区(Shards)和副本(Replicas)的使用

Elasticsearch是一个高性能的、分布式的搜索与数据分析引擎&#xff0c;广泛用于全文搜索、结构化搜索、分析以及这三者的组合场景。在Elasticsearch中&#xff0c;“索引”&#xff08;Index&#xff09;是其最基本的数据管理单位&#xff0c;可以类比为传统关系数据库中的“数…...

智慧工地反光衣识别检测系统-自动识别是否穿着制定工作服---豌豆云

智慧工地反光衣识别检测特定地区工作人员不穿反光服装个人行为预警&#xff0c;一旦检测到某些不穿反光服装施工作业人员智慧工地反光衣识别检测马上开启警报。 真真正正做到事前预警、事中检测、过后管理。安全操作规程工作人员从繁杂无趣的盯显示屏的每日任务中抽身出去。 …...

vue绘制语音波形图---wavesurfer.js

文章目录 创建实例optionsmethod接收Blob流 https://wavesurfer.xyz/ 创建实例 引入插件&#xff1a;import WaveSurfer from "wavesurfer.js"创建实例对象&#xff1a;this.wavesurfer WaveSurfer.create(options); <div id"waveform"><!-- t…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

消息队列系统设计与实践全解析

文章目录 &#x1f680; 消息队列系统设计与实践全解析&#x1f50d; 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡&#x1f4a1; 权衡决策框架 1.3 运维复杂度评估&#x1f527; 运维成本降低策略 &#x1f3d7;️ 二、典型架构设计2.1 分布式事务最终一致…...

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...

Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II(Linked List Cycle II)详解

文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一&#xff1a;HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二&#xff1a;Floyd 快慢指针法&#xff08;…...

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

Vue 3 + WebSocket 实战:公司通知实时推送功能详解

&#x1f4e2; Vue 3 WebSocket 实战&#xff1a;公司通知实时推送功能详解 &#x1f4cc; 收藏 点赞 关注&#xff0c;项目中要用到推送功能时就不怕找不到了&#xff01; 实时通知是企业系统中常见的功能&#xff0c;比如&#xff1a;管理员发布通知后&#xff0c;所有用户…...

ArcPy扩展模块的使用(3)

管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如&#xff0c;可以更新、修复或替换图层数据源&#xff0c;修改图层的符号系统&#xff0c;甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...