在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. 第5篇 Scrum冲刺博客

    1.站立式会议 1.1 会议图片 1.2 项目进展 成员 昨日任务 今日计划完成任务 陈忠明 歌曲信息的上传/下载包 歌曲批量下载压缩包 吴茂平 完善评论系统 新消息提醒功能设计 黄海钊 修改代码规范 ...

  2. ssm-springboot实现修排名再顺序排的主要代码

    排序改为2,结果如下: package com.zhetang.controller; import com.core.vo.JsonResult; import com.utils.PageResu ...

  3. jsp页面关于isELIgnored="false",页面无法解析数据问题

    问题: 首先确定所取的集合里面是否有值,如果没有先检查集合 如果有,就再jsp页面头部添加: isELIgnored="false" 具体如下: <%@ page langu ...

  4. 解决 SQL 注入和 XSS 攻击(Node.js 项目中)

    1.SQL 注入 SQL 注入,一般是通过把 SQL 命令插入到 Web 表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的 SQL 命令. SQL 注入示例 在登录界面,后端会根 ...

  5. 【Android】AndroidStudio关于EventBus报错解决方法its super classes have no public methods with the @Subscribe

    作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 首先说明,以前我用eventBus的 ...

  6. Android开发之TextView中间设置横线,适用于电商项目,商品原价之类的功能。

    textview.getPaint().setFlags(Paint. STRIKE_THRU_TEXT_FLAG ); //中间横线 textview.getPaint().setFlags(Pai ...

  7. 公共项目开发:我为什么用 JSDoc,而不用 ts

    公共模块,通常会被多个项目.不同的开发人员使用,所以开发公共模块时,你自己会用还不够,要让所有人都能很快的知道怎么去使用,这一点很关键.通常会从3个方面做到这点: 精心分割代码逻辑,遵循开闭原则: 变 ...

  8. Python基本

    Python基本规则 1.面向对象的跨平台的编程语言 2.文件类型是.py, 3.一个文件是一个模块module,运行整个文件 4.不支持非英文字符,区分大小写 5.一行是一条语句,多条语句写一行用; ...

  9. dya49:django:wsgrief&模板渲染Jinjia2&django的MTV/MVC框架&创建/启动一个django项目

    目录 1.自定义web框架wsgiref版 2.自定义web框架wsgiref版-优化版 3.模板渲染JinJa2 4.MTV和MVC框架 5.django:下载安装&创建启动 自定义web框 ...

  10. 经典SQL问题:Top 10%

    学生表: create table hy_student( id number(4,0) primary key, name nvarchar2(20) not null, score number( ...