Vue2.js (2)引入开发组件

2023-11-11

1.如何引入Vue2(通过CDN)

https://cn.vuejs.org/v2/guide/instance.html - 【学习】-【安装】- section 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>Document</title>
    <!-- 引入 Vue,通过使用CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
</head>

 2.如何引入Element UI

https://element.eleme.io/#/zh-CN/component/installation - 【组件】-【安装】-section CDN

<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>Document</title>
    <!-- 引入CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入Element UI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

3.引入axios发送Ajax请求 

http://www.axios-js.com/zh-cn/docs/ -【文档】-【安装】

<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>xxxxxxx</title>
    <!--引入外部样式CSS文件-->
    <link rel="stylesheet" href="./css/index.css">
    <!--使用CDN,引入Vue模块-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!--引入Element UI引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--引入Element UI引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--引入Axios实现Ajax请求 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

4.引入本地文件(如x.css)

<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>Document</title>
    <!-- 引入本地CSS -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入Element UI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>

备注:./css/index.css,其中“.”代表html所在文件夹。意思是,把html所在文件夹/css/index.css引入。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue2.js (2)引入开发组件 的相关文章

  • jQuery mobile 中的文本区域高度和宽度?

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML
  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法
  • 删除 IE9 边缘周围的 2px 灰色边框

    我正在尝试对这个网站进行编码 尝试关键字 并且我正在尝试找出如何删除这个阴影2px灰色边框延伸到 IE9 窗口的内部 至少顶部 左侧和底部 我的边距设置为零 因此所有页面元素都到达页面的最边缘 但使用 IE9 它们会停在这个灰色边框处 我没
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • Chrome:当父级固定时,无法将一个绝对 div 放置在另一个 div 上

    我发现 当我想要位于顶部的 div 的父级固定时 我无法将一个绝对定位的 div 放置在 Chrome 中的另一个 div 上 div div div div div div 这是演示该问题的 JSFiddle http jsfiddle
  • 为什么开发者讨厌 iframe? [复制]

    这个问题在这里已经有答案了 可能的重复 iframe 被认为是 不好的做法 吗 https stackoverflow com questions 362730 are iframes considered bad practice 在与
  • 身体动画不流畅

    下面代码中的 spaceShip 在开始按住任何箭头键时移动并不顺利 它移动一步 冻结一瞬间 然后 平稳 地移动 怎样才能让它从一开始就顺利运转 而不是 冻结 My code
  • 如何为 HTML 元素创建鼠标拖动滑块?

    我发现的许多滑块插件要么仅单击以查看下一个图像 要么如果它们确实具有鼠标拖动或触摸拖动功能 则仅允许图像 有谁知道为任何 html 元素编写鼠标拖动滑块的插件或可能的方法 我专门使用 SVG 但将来如果能在 div 元素之间滑动就更好了 H
  • jQuery:离线后 POST 出错(iOS 和 Chrome)

    我构建了一个具有离线功能的 HTML5 Web 应用程序 使用 AppCache 程序流程为 Online 在网络上时 应用程序预加载一些基本信息 工作 Offline 用户拿着装有应用程序的平板电脑offline 然后在应用程序上执行他们
  • 来自 HTML5 的 Phonegap Bonjour/Zeroconf 或 Websocket IP 发现

    我正在尝试实现一个 Phonegap HTML5 应用程序 该应用程序连接到 Websocket 服务器 在嵌入式设备中运行 也有 Bonjour 服务 以在家庭网络内交换数据 我想知道使用 Phonegap 检测服务器 IP 的最佳方法
  • 如何消除 HTML 内容周围的边距?

    以下 HTML 显示正常 div style width 100px height 100px background red div Hello div div
  • Masonry - imagesLoaded - 不是函数

    Masonry and imagesLoaded应加载并正常工作 已经制作了一个类似的网站 并且可以正常运行 我不知道我的问题出在哪里 所以我希望你能看到问题所在 应该是少了点什么 在 Chrome Inspect 中 我收到以下错误 Un
  • 我如何能够以两行显示标题,并且每行的字体大小不同?

    我正在使用 Google Chart API 创建时间线图 并希望将图的标题修改为两行 问题 我如何能够显示具有不同字体大小的两线图表标题 电流输出 理想输出 相关研究 我唯一能找到的是有人试图用饼图来做到这一点 但我尝试了但无法使其发挥作
  • 为什么我的淘汰单选按钮在另一个具有点击绑定的元素内时会失败?

    我有一个单选按钮列表 我想要点击 li 他们还检查单选按钮 这一切都有效 直到我放了一个name单选元素上的属性 然后我的代码停止工作 我的代码如下所示 ul li li ul li
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • HTML 锚点,禁用样式

    我有一些 html 锚链接代码 与文档的其余部分不同 我希望它看起来不是链接 有没有一种简单的方法可以禁用由于将文本包装在锚标记中而引起的样式更改 而不必强行使其相同 即 如果我更改正文字体样式 我不必也更改其他一些 link东西 将颜色设

随机推荐

  • 封装Vue.js组件库

    一 组件库介绍 1 开源组件库 Element UI IView 2 组件开发方式CDD 自下而上 从组件级别开始 到页面级别结束 3 CDD的好处 组件在最大程度上被重用 并行开发 可视化测试 二 处理组件边界情况 vue中处理组件边界情
  • 详解IP、TCP报文头部及报文封装过程

    TCP报文 字段介绍 1 源端口 16bit 一个端口所属一个进程 可以通过源端口定位到具体的进程 2 目的端口 16bit 通过目的端口和Ip报文的目的ip地址可以唯一定位到一个进程 3 序号 32bit 当前发送数据的起始序号 每一个字
  • 手机视频网页点播服务器,手机视频点播系统搭建完整方案

    技术选择 服务器操作系统 windows 点播服务器 Nginx 转码和生成清单 ffmpeg 手机客户端 ExoPlayer SDK Nginx和ffmpeg都是跨平台的 应该也可以在linux上搭建出来 搭建视频点播和直播系统使用的协议
  • 2022-2023年度应届生画像白皮书

    导读 进入2023年以来 全球经济环境和国际关系日趋动荡复杂 我国的外贸需求增长放缓 企业经营新老风险交织叠加 在此背景下 诸多企业逐步加大了提质增效的力度 更加谨慎地管理招聘需求 减少招聘规模 加高招聘门槛 上半年招聘市场需求萎缩明显 然
  • 数字IC设计学习笔记_静态时序分析STA_ PrimeTime 基本概述

    数字IC设计学习笔记 PrimeTime 基本概述 1 PrimeTime 基本概述 2 运行模式 1 PrimeTime 基本概述 PrimeTime Synopsys公司提出的 针对于复杂的 全芯片的 门级静态时序分析的工具 可集成在逻
  • Process实操教程

    Process实操教程 中介效应检验 1 Process 下载安装 2 Process 做中介检验 Hello 大家好 这里是行上行下 我是喵君姐姐 之前给大家介绍了如何用amos进行中介调节效应检验 Amos实操教程 中介效应检验 今天我
  • 队列的算法实现[数组法]

    采用数组来保存队列的元素 设立一个队首指针 front 一个队尾指针 rear 分别指向队首和队尾元素 则 rear front 即为存储的元素个数 include
  • rust使用睡袋_Rust怎么按睡袋

    发布时间 2016 08 17 在RUST这款游戏中 玩家需要做的事情就是尽可能的生存下来 很多时候对于资源的分配不均可能导致有些玩家缺乏生存物资 所以容易产生激烈的竞争 如何生存就成了玩家需要做的事情 卡灵魂卡石头方法 卡灵魂的意思是 你
  • 第十四天---LDP,MPLS技术

    LDP 标签分发协议 主要应用在MPLS的控制层面 MPLS控制层面需要完成的工作主要就是分配标签和传递标签 分配标签的前提是本地路由表中得先存在标签 传递标签的前提也是得先具备路由基础 所以 LDP想要正常工作 则需要IGP作为基础 1
  • 蛋花花分析孩子学编程到底有没有用

    蛋花花分析孩子学编程到底有没有用 据蛋花花了解对于6到16岁的青少儿来说 在这个AI时代 学习编程简直就是必修课 那么究竟什么样的课程是适合孩子的 能够让孩子对编程保持持续的兴趣 又是什么样的课程能够让孩子们学到的是计算机语言的基本逻辑及分
  • Unity上一个动画的Duration导致下一个动画的事件被调用多次

    情景 我用一个blendtree JumpAndFallBlendTree来切换Jump和Fall的动画 当inAir为true时进入 当inAir为false时退出 当人物着地时 我将inAir置为false 将land置为true 播放
  • 入门googletest

    引入 Google test是一种比较方便的C 测试框架 它可以帮助我们比较方便的进行测试代码 以及输出尽可能详细的失败信息 能够大大缩短我们测试代码的编写效率 而且这个框架的使用也比较简单 之前还在学校学习过Junit框架 作为一个jav
  • vmwareworkstation上Linux安装流程

    如何在vmware workstation上安装linux 安装步骤 1 点击创建新的虚拟机 2 选择典型 点击下一步 3 点击浏览 选择centos 7 x86 64Everything 2009 之后选择稍后安装操作系统 点击下一步 4
  • 2021年终总结:30岁被迫转行,苦逼码农的心酸历程

    背景 岁月如梭 2021已接近尾声 而我还在搬砖道路上不停的奔波 蓦然回首 回想起这一年的经历 悲喜交加 随着年纪的不断增长 渐渐的开始回忆 回忆曾经的事情和点点滴滴 但渐渐的都开始模糊和淡忘 为了让这些点点滴滴能够在未来某个时间想起时还能
  • java如何代码识别excel单元格 删除线_如何解决和审核Excel 2019中的问题

    1 公式标签 Excel在组织功能方面非常出色 并且可以将它们分为对新用户有意义的菜单部分 数据 选项卡包含用于创建和操作存储在本地电子表格或远程数据库中的表中的信息的所有功能 公式 选项卡包含与公式一起使用的所有功能 包括对其进行审核和故
  • 强化学习笔记之策略梯度PG

    前面几天观看了B站周博磊老师的强化学习纲要系列视频狠狠地补了一下基础 强烈推荐没有基础的同学去补补基础 特别是MP马尔可夫过程 MRP马尔可夫奖励过程 MDP马尔可夫决策过程等 才能更好地理解与掌握后来的强化学习算法的算法思想 出发点是什么
  • windows服务器 应通过设定终端接入方式或网络地址范围对通过网络进行管理的管理终端进行限制。

    评测项 应通过设定终端接入方式或网络地址范围对通过网络进行管理的管理终端进行限制 整改建议 建议操作系统设定终端接入方式 网络地址范围等条件限制终端登录 如windows防火墙启用 高级设置 打开 高级安全windows防火墙 窗口 入站规
  • 2022年焊工考试电焊工考试模拟试题卷及答案

    题库来源 优题宝公众号 2022年焊工考试电焊工考试模拟试题卷及答案 由优题宝公众号根据最新焊工考试电焊工考试大纲与历年焊工考试电焊工考试真题汇总编写 包含焊工考试电焊工考试常考重点题型与知识点 有助于考生复习备考焊工考试电焊工考试 取得好
  • 简单公式

    1 行内公式 有三种形式 美元符号 c a b c a b math环境 begin math c a b end math 2 上下标 1 上标 使用 两位以上数字使用 括起来 如 x的20次方 x 20 2 下标 使用 3 希腊字母 希
  • Vue2.js (2)引入开发组件

    1 如何引入Vue2 通过CDN https cn vuejs org v2 guide instance html 学习 安装 section CDN DOCTYPE html gt