vue加載天氣組件使用方法詳解
更新時間:2021年08月27日 08:39:47 作者:張一西-告白confession
這篇文章主要為大家詳細介紹了vue加載天氣組件的使用方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue加載天氣組件的使用方法,供大家參考,具體內(nèi)容如下
首先我們進入中國天氣網(wǎng)生成一段代碼
根據(jù)需要設(shè)置天氣樣式


復(fù)制并修改生成的這段代碼到vue中
將script引入 修改為vue的動態(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動態(tài)生成script (在html中當(dāng)成組件來用)
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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式
這篇文章主要介紹了element-UI?el-table樹形數(shù)據(jù)?修改小三角圖標(biāo)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07
Vue.js 的移動端組件庫mint-ui實現(xiàn)無限滾動加載更多的方法
下面小編就為大家分享一篇Vue.js 的移動端組件庫mint-ui實現(xiàn)無限滾動加載更多的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
vuejs使用axios異步訪問時用get和post的實例講解
今天小編就為大家分享一篇vuejs使用axios異步訪問時用get和post的實例講解,具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue2 中如何實現(xiàn)動態(tài)表單增刪改查實例
本篇文章主要介紹了vue2 中如何實現(xiàn)動態(tài)表單增刪改查實例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-06-06

