在Vue项目中实现天气预报功能的实例:vue-mini-weather组件使用教程
最编程
2024-02-01 10:12:52
...
1、安装
npm i vue-mini-weather --save
2、引入
// 1. 全局引入 //main.js 项目入口文件 import Vue from 'vue' import weather from 'vue-mini-weather' Vue.use(weather) //app.vue 项目文件 <template> <v-mini-weather></v-mini-weather> </template>
// 2. 局部引入
//app.vue 项目文件
<template>
<v-mini-weather></v-mini-weather>
</template>
<script>
import { vMiniWeather } from 'vue-mini-weather'
export default {
components: {
vMiniWeather
}
}
</script>
3.页面
<template> <v-mini-weather></v-mini-weather> </template> <script> import { vMiniWeather } from 'vue-mini-weather' export default { components: { vMiniWeather, }, created() { this.getWeather() // 获取天气 }, methods: { // 获取天气 getWeather() {
// '//'是解决掉指向加上vue里指向的后台地址http://localhost:8080问题 axios.get('//' + 'http://www.weather.com.cn/data/cityinfo/101010100.html').then(function (res) { debugger this.weather = res.data.data.forecast[0].type ? res.data.data.forecast[0].type : '' this.lower = res.data.data.forecast[0].low.substr(2) this.higher = res.data.data.forecast[0].high.substr(2) console.log(res.data.data); }).catch(function (error) { console.log(error); }); }, } }
原文地址:https://www.cnblogs.com/magic-world/p/16385567.html
上一篇: 如何使用ag-grid实现实时更新表头和绑定表格数据?
下一篇: 将 HT Vue 整合到项目中