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

news/2024/7/10 0:45:42 标签: 前端, elementui, vue

通过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>Hello Vue!</title>
</head>
<body>
<div>
    <h1>{{info}}</h1>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js"></script>
<script>
    let v = new Vue(
        {
            el: "div",     // el(element):元素,设置"Vue对象"管理的范围,值的格式为"CSS选择器"
            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>

结果

在这里插入图片描述

在这里插入图片描述


http://www.niftyadmin.cn/n/5413142.html

相关文章

java-springboot 源码 01

01.springboot 是一个启动器 先安装maven&#xff0c;按照网上的流程来。主要是安装完成后&#xff0c;要修改conf目录下的setting.xml文件。 添加&#xff1a;阿里云镜像 <mirror><id>aliyunmaven</id><mirrorOf>*</mirrorOf><name>ali…

[Redis]——Redis命令手册set、list、sortedset

&#x1f333;List类型常见命令 LPUSH / RPUSH [KEY] [element] …… 向列表左侧或者右侧插入一个或多个元素 LPOP / RPOP [key] 删除左边或者右边第一个元素 LRANGE [key] start end 返回索引start到end的元素&#xff08;索引从0开始&#xff09; BLPOP / BRPOP [key] [等…

IT外包怎样帮助企业控制成本?

在当今激烈的商业竞争中&#xff0c;企业不仅需要保持创新&#xff0c;还需要有效控制成本。IT外包作为一种管理模式&#xff0c;成为许多企业降低成本的得力工具。究竟IT外包如何帮助企业控制成本呢&#xff1f; 首先&#xff0c;IT外包在减少人力资源成本方面发挥了至关重要的…

设计模式在芯片验证中的应用——备忘录

1. 前言 软件设计模式定义了一组类和它们之间的关系&#xff0c;它们相互作用用以解决软件开发过程中面临的常见问题。由于验证工程师所做工作的重要部分包括使用面向对象语言(如SystemVerilog)进行编码&#xff0c;因此许多遇到的挑战都适合应用特定的设计模式来解决。将它们…

串的匹配算法——KMP算法

目录 一.特点 二.算法思想 三.公式证明 四.next数组及其练习 五.找规律计算next[k] 六.代码实现 一.特点 BF算法的特点是i回退&#xff0c;KMP算法的最大特点是i不回退&#xff0c;由于i不回退&#xff0c;所以KMP算法的时间复杂度是O(nm)。 二.算法思想 在匹配主串和子…

thinkphp学习12-数据库的时间查询

传统方式 可以使用>、<、>、<来筛选匹配时间的数据&#xff1b; public function index() {$res Db::name(user)->where(create_time, >, 2018-1-1)->select();dump($res); }可以使用 between 关键字来设置时间的区间&#xff1b; public function in…

30天JS挑战(第十三天) ------滑动图片滚入

第十三天挑战(滑动图片滚入) 地址&#xff1a;https://javascript30.com/ 所有内容均上传至gitee&#xff0c;答案不唯一&#xff0c;仅代表本人思路 中文详解&#xff1a;https://github.com/soyaine/JavaScript30 该详解是Soyaine及其团队整理编撰的&#xff0c;是对源代…

Pytorch学习 day02(加载数据、数据集类)

加载数据 * Dataset提供一种方式&#xff1a;来获取数据及其label&#xff0c;给数据进行编号 * Dataloader为神经网络提供不同的数据形式 Dataset的组织形式有很多种&#xff0c;例如&#xff1a; 将label放在文件夹名上&#xff0c;如下&#xff1a; #Dateset # --train #…