vue加载天气组件使用方法详解

本文实例为大家分享了vue加载天气组件的使用方法，供大家参考，具体内容如下

首先我们进入中国天气网生成一段代码

根据需要设置天气样式

复制并修改生成的这段代码到vue中

将script引入 修改为vue的动态引入方法

<template>
    <div id="weater">
        <div id="weather-view-he" ref="weather"></div>
        <remote-script src="天气网生成代码中script的src"></remote-script>
    </div>
</template>
<script>
window.WIDGET = {ID: '123456'};   // 将WIDGET前边加上window 否则读取不到此变量
import Vue from 'vue'
Vue.component('remote-script', {   // vue动态生成script (在html中当成组件来用)
    render: function (createElement) {
        var self = this;
        return createElement('script', {
            attrs: {
                type: 'text/javascript',
                src: this.src
            },
            on: {
                load: function (event) {
                    self.$emit('load', event);
                },
                error: function (event) {
                    self.$emit('error', event);
                },
                readystatechange: function (event) {
                    if (this.readyState == 'complete') {
                        self.$emit('load', event);
                    }
                }
            }
        });
    },
    props: {
        src: {
            type: String,
            required: true
        }
    }
})
export default {
    name:"Weather",
    data(){
        return {

        }
    },
}
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue实现天气预报小应用

    Vue实现天气预报小应用

    这是本人在自学vue框架时候所模仿的一个网站,可以查询一些城市的天气情况,大家可以看看: html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /

  • vue使用webSocket更新实时天气的方法

    vue使用webSocket更新实时天气的方法

    目录 前言 关于 webSocket 的操作及示例: webSocket 1.关于 webSocket 2.与 AJAX 轮的区别 3.webSocket 事件 4. 一个简单的示例 天气更新 图片素材 重连机制 前言 在 vue 中使用 webSocket 做一个简单的天气实时更新模块. 关于 webSocket 的操作及示例: 1.webSocket 连接 2.接收数据 3.重连机制 webSocket 1.关于 webSocket webSocket 是 HTML5 开始提供的一种在单个

  • Vue实现天气预报功能

    Vue实现天气预报功能

    本文为大家分享了Vue实现天气预报功能的具体代码,供大家参考,具体内容如下 1.功能描述 在搜索框中输入城市,下方出现今天及未来四天的天气情况.搜索框下面固定了几个城市,点击可以快速查询. 2.html代码 <div id="app"> <div id="srchbar"> <input type="text" v-model="city" @keyup.enter="srch(city

  • vue加载天气组件使用方法详解

    vue加载天气组件使用方法详解

    本文实例为大家分享了vue加载天气组件的使用方法,供大家参考,具体内容如下 首先我们进入中国天气网生成一段代码 根据需要设置天气样式 复制并修改生成的这段代码到vue中 将script引入 修改为vue的动态引入方法 <template> <div id="weater"> <div id="weather-view-he" ref="weather"></div> <remote-scrip

  • Vue使用Three.js加载glTF模型的方法详解

    前言 Three.js是一个跨浏览器的脚本,使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形,基于WebGL实现,对WebGL进行了进一步的封装,简化了多数复杂的接口. Three.js支持包括 .obj..gltf等类型的模型结构.glTF(GL传输格式)是Khronos的一个开放项目,它为3D资产提供了一种通用的.可扩展的格式,这种格式既高效又与现代web技术高度互操作. obj格式的模型只支持顶点.法线.纹理坐标和基本材质,而glTF模型除上述所有内容外

  • Vue自嵌套树组件使用方法详解

    Vue自嵌套树组件使用方法详解

    本文实例为大家分享了Vue自嵌套树组件的使用方法,供大家参考,具体内容如下 效果图 注意事项 组件自嵌套,定义名称时就定义为组件名 单选和多选用户时,以最顶级父组件的属性为准,由于组件内不能同步修改prop,故采用data注册另一个同类型数值用于接收组件内改变,并使用update,同步更新到prop上 展开组件才开始加载用户列表 <template> <ul v-show="isShow" ref="user-tree"> <li v-

  • vue使用keep-alive进行组件缓存方法详解(组件不缓存问题解决)

    vue使用keep-alive进行组件缓存方法详解(组件不缓存问题解决)

    目录 一.使用场景 二. 认识下keep-alive 三.在组件中应用 四.解决组件不缓存问题 五.keep-alive配合router使用 总结 一.使用场景 在vue开发过程中(单页面),有一些需求需要我们把页面状态保存下来.在切换页面时,页面不会进行重新加载. 一般情况下,如果不做特殊处理,会重新执行created 和 mounted生命周期,从而重新加载页面,默认就显示到第一页去了,就很烦. (我的问题是,使用keep-alive了,但组件仍然不缓存,下面会解决) 二. 认识下keep-

  • 使用PreloadJS加载图片资源的基础方法详解

    一. 使用createjs里的LoadQueue函数实现异步加载图片,监听加载进度 1.实例对象LoadQueue加载队列对象 var queue = new createjs.LoadQueue(false); 2.需要监听常用到的三个方法 //监听进度事件 queue.on("progress", function (e) { }); //监听加载事件 queue.on("fileload", function (e) { }); //监听完成事件 queue.

  • ASP.NET Core中修改配置文件后自动加载新配置的方法详解

    前言 在 ASP.NET Core 默认的应用程序模板中, 配置文件的处理如下面的代码所示: config.AddJsonFile( path: "appsettings.json", optional: true, reloadOnChange: true ); config.AddJsonFile( path: $"appsettings.{env.EnvironmentName}.json", optional: true, reloadOnChange: t

  • Vue日期时间选择器组件使用方法详解

    Vue日期时间选择器组件使用方法详解

    本文实例为大家分享了Vue日期时间选择器组件的具体代码,供大家参考,具体内容如下 1.效果图如下 单选日期选择器 多选日期选择器 日期时间选择器 2.准备 Date原型格式化工具方法 Date.prototype.format = function(fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": thi

  • Vue.js标签页组件使用方法详解

    Vue.js标签页组件使用方法详解

    本文实例为大家分享了Vue.js标签页组件使用的具体代码,供大家参考,具体内容如下 效果 入口页 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&q

  • Vue.js数字输入框组件使用方法详解

    Vue.js数字输入框组件使用方法详解

    本文实例为大家分享了Vue.js数字输入框组件的具体实现代码,供大家参考,具体内容如下 效果 入口页 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

  • vue+elementUI面包屑组件封装方法详解

    vue+elementUI面包屑组件封装方法详解

    本文实例为大家分享了vue+elementUI面包屑组件封装的具体代码,供大家参考,具体内容如下 一.选择用哪种样式 二.在组件文件夹下创建组件 三.在Bread.vue复制如下代码 <template>   <!-- 面包屑 -->   <div class="bread">  <el-breadcrumb separator-class="el-icon-arrow-right">  <el-breadcru

随机推荐