在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中使用天气插件的更多相关文章

  1. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  2. Vue中的better-scroll插件

    Vue中的better-scroll插件 在需要的文件中添加 import BScorll from 'better-scroll'; 引用的示例代码: let scroll = new BScrol ...

  3. vue中使用video插件vue-video-player

    一.安装插件 npm install vue-video-player --save 二.配置插件 在main.js中全局配置插件 import VideoPlayer from 'vue-video ...

  4. vue中使用vue-pdf插件显示pdf

    最近项目需求需要在vue中展示pdf,上网搜索了实现方法,找到vue-pdf这个插件非常好用,并且还有许多方法.属性能进行功能扩展. 一.安装 npm install --save vue-pdf 二 ...

  5. vue中如何开发插件

    1.vue中提供了install方法用来开发插件 官方:Vue.js 的插件应该有一个公开方法 install.这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象. 2.我的插件目 ...

  6. react 或 vue 中引用 jQuery 插件

    前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...

  7. vue中引入swiper插件

    这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'v ...

  8. Vue中 axios+QS 插件往后台传参

    之前用Vue+element写了一个后台管理系统,在登录时使用axios请求数据传参时无法正常的获取数据.发现原因是传递参数要将参数序列化.这里使用了qs插件: 简单来说,qs 是一个增加了一些安全性 ...

  9. vue中使用jquery插件

    (1)使用npm下载安装依赖 直接npm  install  ‘插件名称’ --save   安装依赖 在main.js中引入插件的样式 在页面中直接使用 (2)直接将js文件引入到项目中 先将js文 ...

随机推荐

  1. Ubuntu 磁盘满了处理方法。

    Ubuntu 磁盘满了处理方法: 1. 如果是虚拟机安装ubuntu,直接给虚拟机安装ubuntu 系统所在的盘符动态分配一点磁盘容量,就可以了. 2. 如果不是虚拟机安装ubuntu,那么有两个办法 ...

  2. seo快速排名利器之高权重二级域名

    http://www.wocaoseo.com/thread-225-1-1.html        正规的白帽手法优化一个关键词一般都需要两三个月才能把词做上去,但是现在也有一批做网站优化的采取特殊 ...

  3. 重温Java Web的技术细节

    目录 一.背景 二.请求与响应 2.1.Http请求 2.2.Http响应 三.ServletConfig 3.1 测试ServletConfig参数 四.ServletContext 4.1 测试S ...

  4. e3mall商城的归纳总结2之认识dubbo、zookeeper

    由于本项目用的是soa架构,因此必须需要两个系统之间进行通信,目前的解决办法有三种(本人认为) Webservice:效率不高基于soap协议.项目中不推荐使用. 使用restful形式的服务:htt ...

  5. 使用【QQ五笔的码表】转成【百度手机自定义码表】

    使用[QQ五笔码表]转成[百度手机自定义码表] QQ五笔码表先转成多多格式. 这里选用极点>>多多. 然后去掉空格. 转成GB.去掉没的字. 百度要的是这种格式. 现再用点讯工具转成 de ...

  6. Python开发的入门教程(七)-切片

    介绍 本文主要介绍Python中切片的基本知识和使用 对list进行切片 取一个list的部分元素是非常常见的操作.比如,一个list如下: >>> L = ['Adam', 'Li ...

  7. Jogl2.0 jogamp-all-platforms 在eclipse 中的配置

    我的电脑在win8 64位系统,搞了好久,网上的方法都快试了个遍,官网的试了,都不行,目前成功了,希望可以帮助其他同学. 1.首先去这里http://jogamp.org/deployment/jog ...

  8. 哈希,hash

    Hash,一般翻译做散列.杂凑,或音译为哈希.----摘自百度百科 先来看个题:给你一坨一些键值集<key,value>,\(key\)的范围是\([1,10^{10}]\),每次询问\( ...

  9. Q200510-03-02: LRU缓存机制

    问题: LRU缓存机制运用你所掌握的数据结构,设计和实现一个 LRU (最近最少使用) 缓存机制.它应该支持以下操作: 获取数据 get 和 写入数据 put . 获取数据 get(key) - 如果 ...

  10. Oracle的timestamp字段更新实验 结论:只有逐条更新才能保证timestamp字段有差别,批量更新只会得到一致的时间,此操作无关时间精度.

    有这么一张表: create table hy_testtime( id number(6,0) not null primary key, name nvarchar2(20) not null, ...