vue加載天氣組件使用方法詳解
更新時(shí)間：2021年08月27日 08:39:47 作者：張一西-告白confession
這篇文章主要為大家詳細(xì)介紹了vue加載天氣組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue加載天氣組件的使用方法，供大家參考，具體內(nèi)容如下
首先我們進(jìn)入中國(guó)天氣網(wǎng)生成一段代碼
根據(jù)需要設(shè)置天氣樣式
復(fù)制并修改生成的這段代碼到vue中
將script引入 修改為vue的動(dòng)態(tài)引入方法
<template>
<div id="weater">
<div id="weather-view-he" ref="weather"></div>
<remote-script src="天氣網(wǎng)生成代碼中script的src"></remote-script>
</div>
</template>
<script>
window.WIDGET = {ID: '123456'}; // 將WIDGET前邊加上window 否則讀取不到此變量
import Vue from 'vue'
Vue.component('remote-script', { // vue動(dòng)態(tài)生成script (在html中當(dāng)成組件來(lái)用)
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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue style width a href動(dòng)態(tài)拼接問(wèn)題的解決
這篇文章主要介紹了vue style width a href動(dòng)態(tài)拼接問(wèn)題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件步驟解析
今天給大家介紹一款基于vue2的canvas時(shí)鐘倒計(jì)時(shí)組件，這個(gè)時(shí)鐘倒計(jì)時(shí)組件采用canvas動(dòng)畫(huà)的炫酷動(dòng)畫(huà)效果形式，根據(jù)剩余時(shí)間的多少變換顏色和旋轉(zhuǎn)扇形的速度，適合搶購(gòu)、拍賣、下注等業(yè)務(wù)場(chǎng)景，且對(duì)移動(dòng)端友好,需要的朋友可以參考下2018-11-11
本篇文章主要介紹了解析Vue2.0雙向綁定實(shí)現(xiàn)原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
vue中多路由表頭吸頂實(shí)現(xiàn)的幾種布局方式
這篇文章主要介紹了vue項(xiàng)目多路由表頭吸頂實(shí)現(xiàn)的幾種布局方式,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vuex數(shù)據(jù)狀態(tài)持久化問(wèn)題
這篇文章主要介紹了vuex數(shù)據(jù)狀態(tài)持久化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
基于vue實(shí)現(xiàn)網(wǎng)站前臺(tái)的權(quán)限管理(前后端分離實(shí)踐)
這篇文章主要介紹了基于vue實(shí)現(xiàn)網(wǎng)站前臺(tái)的權(quán)限管理(前后端分離實(shí)踐)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
vue項(xiàng)目打包部署_nginx代理訪問(wèn)方法詳解
今天小編就為大家分享一篇vue項(xiàng)目打包部署_nginx代理訪問(wèn)方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue父組件如何獲取子組件中的變量，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細(xì)介紹了vue雙向綁定的簡(jiǎn)單實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue自定義switch開(kāi)關(guān)組件,實(shí)現(xiàn)樣式可自行更改
今天小編就為大家分享一篇vue自定義switch開(kāi)關(guān)組件,實(shí)現(xiàn)樣式可自行更改，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11