在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. Datanode 怎么与 Namenode 通信?

    在分析DataNode时, 因为DataNode上保存的是数据块, 因此DataNode主要是对数据块进行操作. A. DataNode的主要工作流程 客户端和DataNode的通信: 客户端向Dat ...

  2. secureCRT中sftp的使用

    securecrt 按下ALT+P就开启新的会话 进行ftp操作.输入:help命令,显示该FTP提供所有的命令pwd: 查询linux主机所在目录(也就是远程主机目录)lpwd: 查询本地目录(一般 ...

  3. 03 . Go开发一个日志平台之Elasticsearch使用及kafka消费消息发送到Elasticsearch

    Elasticsearch使用 详细使用请看我写的Go操作Elasticsearch专篇 https://www.cnblogs.com/you-men/p/13391265.html example ...

  4. 【Gin-API系列】Gin中间件之鉴权访问(五)

    在完成中间件的介绍和日志中间件的代码后,我们的程序已经基本能正常跑通了,但如果要上生产,还少了一些必要的功能,例如鉴权.异常捕捉等.本章我们介绍如何编写鉴权中间件. 鉴权访问,说白了就是给用户的请求增 ...

  5. Android开发必有功能,更新版本提示,检测是否有新版本更新。下载完成后进行安装。

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985,转载请说明出处. 给大家介绍个东西,MarkDown真的超级超级好用.哈哈.好了, 正题内容如下: 先 ...

  6. Android开发之获取APP的应用程序名称以及版本名称信息java工具类

    //跟App相关的辅助类 public class AppUtils { private AppUtils() { /* cannot be instantiated */ throw new Uns ...

  7. Python模拟保护和私有成员

    保护成员:以一个下划线开头.Python不会做特殊处理 私有成员:以两个下划线开头.Python会做mangling

  8. [BUUOJ记录] [ACTF2020 新生赛]BackupFile、Exec

    两道题都比较简单,所以放到一块记下来吧,不是水博客,师傅们轻点打 BackupFile 题目提示“Try to find out source file!”,访问备份文件/index.php.bak获 ...

  9. node中间件

    npm i body-parser post 请求主题中间件 const bodyParser = require('body-parser')   const bodyParser = requir ...

  10. 小程序里的request

    test.js 代码如下: makeRequest: function (e) { var self = this wx.request({ url: 'http://lt.com/home/inde ...