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

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

news 2026/2/11 7:04:18

通过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="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…...

编程日记 2024/2/7 15:16:14

设计模式（行为型模式）备忘录模式

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

编程日记 2024/2/7 15:11:09

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

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

编程日记 2024/2/7 15:10:08

《MySQL》超详细笔记

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

编程日记 2024/2/7 15:07:06

商用密码

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

编程日记 2024/2/7 15:05:04

css1文本属性

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

编程日记 2024/2/7 15:04:03

在容器中使用buildah构建镜像

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

编程日记 2024/2/7 15:03:02

GPT4_VS_ChatGPT（from_nytimes）

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

编程日记 2024/2/7 15:02:01

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

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

编程日记 2024/2/7 14:58:58

部署tomcat

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

编程日记 2024/2/7 14:55:54

【Java 数据结构】枚举

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

编程日记 2024/2/7 14:54:53

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

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

编程日记 2024/2/7 14:53:52

docker 离线安装镜像

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

编程日记 2024/2/7 14:51:50

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

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

编程日记 2024/2/7 14:43:42

typecho 在文章中添加 bilibili 视频

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

编程日记 2024/2/7 14:42:41

Android.mk 语法详解

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

编程日记 2024/2/7 14:41:40

ChatGPT高效提问—prompt基础

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

编程日记 2024/2/7 14:38:37

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

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

编程日记 2024/2/7 14:37:35

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

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

编程日记 2024/2/7 14:36:35

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

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

编程日记 2024/2/7 14:34:32

华为云AI开发平台ModelArts

华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/2/10 23:05:30

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。但是&#…...

编程新知 2026/2/8 4:37:17

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口目录第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2026/2/1 13:28:03