在vue中使用天气插件
在vue中使用天气插件
插件网址: 中国天气
选择自己需要的插件、生成代码复制即可

在 vue 中的使用:
template 中
<div id="weather-v2-plugin-simple"></div>
mounted 中
window.WIDGET = {CONFIG:{"modules":"20","background":5,"tmpColor":"ffffff","tmpSize":16,"cityColor":"ffffff","citySize":16,"aqiSize":16,"weatherIconSize":24,"alertIconSize":18,"padding":"10px 10px 10px 10px","shadow":"1","language":"auto","borderRadius":5,"fixed":"false","vertical":"middle","horizontal":"center","key":"aGh9gAMF5m"}}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://apip.weatherdt.com/simple/static/js/weather-simple-common.js?v=2.0';
document.getElementsByTagName('head')[0].appendChild(script);
在vue中使用天气插件的更多相关文章
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- Vue中的better-scroll插件
Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScrol ...
- vue中使用video插件vue-video-player
一.安装插件 npm install vue-video-player --save 二.配置插件 在main.js中全局配置插件 import VideoPlayer from 'vue-video ...
- vue中使用vue-pdf插件显示pdf
最近项目需求需要在vue中展示pdf,上网搜索了实现方法,找到vue-pdf这个插件非常好用,并且还有许多方法.属性能进行功能扩展. 一.安装 npm install --save vue-pdf 二 ...
- vue中如何开发插件
1.vue中提供了install方法用来开发插件 官方:Vue.js 的插件应该有一个公开方法 install.这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象. 2.我的插件目 ...
- react 或 vue 中引用 jQuery 插件
前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...
- vue中引入swiper插件
这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'v ...
- Vue中 axios+QS 插件往后台传参
之前用Vue+element写了一个后台管理系统,在登录时使用axios请求数据传参时无法正常的获取数据.发现原因是传递参数要将参数序列化.这里使用了qs插件: 简单来说,qs 是一个增加了一些安全性 ...
- vue中使用jquery插件
(1)使用npm下载安装依赖 直接npm install ‘插件名称’ --save 安装依赖 在main.js中引入插件的样式 在页面中直接使用 (2)直接将js文件引入到项目中 先将js文 ...
随机推荐
- 利用JavaScript当鼠标点击导航时改变背景
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一篇文章快速搞懂Qt文件读写操作
导读:Qt当中使用QFile类对文件进行读写操作,对文本文件也可以与QTextStream一起使用,这样读写操作会更加简便.QFileInfo可以用来获取文件的信息.QDir可以用于对文件夹进行操作. ...
- Sublime Text3 个人使用安装设置
1 安装Package Control 自动安装: 点击 View > Show Console 输入以下代码并运行 import urllib.request,os,hashlib; h = ...
- .NET ORM 导航属性【到底】可以解决什么问题?
写在开头 从最早期入门时的单表操作, 到后来接触了 left join.right join.inner join 查询, 因为经费有限,需要不断在多表查询中折腾解决实际需求,不知道是否有过这样的经历 ...
- webpack(从上篇博客中拿出来的)
插件配置: emmet: vscode内置了这个,但是没有开启,要在设置里面"emmet.triggerExpansionOnTab": true, vscoed-icons插件: ...
- eclipse 设置默认编码为Utf-8 详细教程。
需要设置的几处地方为: Window->Preferences->General ->Content Type->Text->JSP 最下面设置为UTF-8 Window ...
- Java 中基本数据类型的变量的转换规则
基本数据类型之间的转换 变量之间的转换规则 布尔型变量在和其他 7 种基本数据类型做运算时,无法转化为其他的数据类型,所以下面所说的运算都是除了布尔型的其他 7 种基本数据类型之间的转换. 1.自动类 ...
- 安装cnpm设置npm淘宝镜像源
安装cnpm npm install -g cnpm 验证npm镜像源 npm config get registry 题外话:cnpm和npm区别? cnpm其实就是在npm的基础上将镜像源更换到国 ...
- SpringCloud系列之分布式配置中心极速入门与实践
SpringCloud系列之分布式配置中心极速入门与实践 @ 目录 1.分布式配置中心简介 2.什么是SpringCloud Config? 3.例子实验环境准备 4.Config Server代码实 ...
- Kubernetes 服务部署最佳实践(二) ——如何提高服务可用性
引言 上一篇文章我们围绕如何合理利用资源的主题做了一些最佳实践的分享,这一次我们就如何提高服务可用性的主题来展开探讨. 怎样提高我们部署服务的可用性呢?K8S 设计本身就考虑到了各种故障的可能性,并提 ...