当前位置: 首页 > 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…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...

RLHF vs RLVR:对齐学习中的两种强化方式详解

在语言模型对齐&#xff08;alignment&#xff09;中&#xff0c;强化学习&#xff08;RL&#xff09;是一种重要的策略。而其中两种典型形式——RLHF&#xff08;Reinforcement Learning with Human Feedback&#xff09; 与 RLVR&#xff08;Reinforcement Learning with Ver…...

2025 后端自学UNIAPP【项目实战:旅游项目】7、景点详情页面【完结】

1、获取景点详情的请求【my_api.js】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http(/login/getWXSessionKey, {code,avatar}); };//…...