案例介绍

学习背景：快快学习，学完找工作

输入城市回车或点击搜索可以查询天气。

代码结构

<div class="wrap" id="app"><div class="search_form">//logo和搜索栏<div class="logo"><img src="img/logo.png" alt="logo" /></div><div class="form_group"><input type="text" v-model="city"  @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询天气的城市"/><button class="input_sub" @click="searchWeather">搜 索</button></div>//热门城市快捷搜索<div class="hotkey"><a href="javascript:;" @click="changeCity('北京')">北京</a><a href="javascript:;" @click="changeCity('上海')">上海</a><a href="javascript:;" @click="changeCity('广州')">广州</a><a href="javascript:;" @click="changeCity('深圳')">深圳</a></div></div>//显示天气的格式<ul class="weather_list"><li v-for="item in weatherList"><div class="info_type"><span class="iconfont">{{ item.type }}</span></div><div class="info_temp"><b>{{ item.low }}</b>~<b>{{ item.high }}</b></div><div class="info_date"><span>{{ item.date }}</span></div></li></ul></div>

js部分：

 var app = new Vue({el:"#app",data:{city:"无锡",weatherList:[]},methods:{searchWeather:function(){// console.log("search");// console.log(this.city);// 保存thisvar that = this;axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)// 成功之后调取.then(function(response){// console.log(response);// console.log(response.data.data.forecast);// 这里就直接是that.weatherList而不是that.data.weatherList// 还要注意：调用此函数的是服务器端，所这里的this不是Vue中的thisthat.weatherList=response.data.data.forecast// app.weatherList=response.data.data.forecast})// // 箭头函数方式// .then(response => {//     this.weatherList = response.data.data.forecast// })// 失败之后调取.catch(function(err){})},changeCity:function(city){this.city=city;this.searchWeather();}}})

分析

请求地址:http://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city(城市名)
响应内容:天气信息

点击回车
查询数据
渲染数据

通过接口发送请求，接收返回的信息展示

知识点学习

关于axios.get的写法
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)里面?city=是原链接后加的，又加了this.city的值，只要括号里是一个完整的链接就行。
.get后面就是.then、.catch，这种写法留意，axios没学好。
<a href="javascript:;" @click="changeCity('北京')">北京</a>中的href="javascript:"
其中javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:可以实现A标签的点击事件运行时，如果页面内容很多，有滚动条时，页面不会乱跳，用户体验更好
Vue 解惑之关于axios 回调函数中 this 的指向
解决这个问题可以提前保存一份this,或者用app.weatherList，又或者用箭头函数。箭头函数我也不是很了解，至于为什么this 会不一样，我觉得应该是this指的是本地，当axios请求到服务端时，this就已经是服务端的地址了，然后.then是在服务端执行的，所以其中的this自然是指服务端的this。不知道理解的对不对。

注意事项

保存this 时，要注意在axios外保存。

项目再现

代码地址：GitHub

天知道-网络应用-Vue小案例-黑马程序员相关推荐

学成在线案例——黑马程序员pink老师\思路讲解\完整源代码
本文为跟随B站黑马程序员pink老师学习CSS时所写,文章讲解了学成在线首页的制作思路,并贴出了源代码,作为学习笔记分享给大家如有错误,欢迎指出.如有侵权,联系删除文章目录 1. 案例准备工作 2 ...
【Vue】路由 —— 黑马程序员
前端路由的概念与原理 1. 什么是路由路由(英文:router)就是对应关系. 2. SPA 与前端路由 SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯 ...
跟着黑马程序员pink老师学习的笔记及小破站学习的笔记
网页 1.网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合 2.什么是网页? 网页是网站中的一"页",通常是HTML格式的文件,它要通过浏览器来 ...
黑马程序员_石头迷阵小游戏
黑马程序员_石头迷阵小游戏源代码一些说明: 1)这些是我看b站黑马程序员的视频,自己手打的,想分享一下,如果有侵权啥的请联系我,马上删除 2)一些比较重要的我都有给注释 3)工具idea idk版 ...
HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第五章课后习题(课程介绍专栏效果)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程第五章:"课程介绍"专栏-课后习题参考代码题目原型: 请结合给出的素材,运用列表标记,超链接标记以 ...
HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第四章课后习题(播放器图标)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程第四章:播放器图标-课后习题参考代码 ........ 记得关注,收藏,评论哦,作者将持续更新.... 我自己做的效果 ...
黑马程序员匠心之作|C++教程从0到1入门编程（60 指针-const修饰指针61 指针-指针和数组62 指针-指针和函数63 指针-指针配合数组和函数的案例）
黑马程序员匠心之作|C++教程从0到1入门编程(60 指针-const修饰指针61 指针-指针和数组62 指针-指针和函数63 指针-指针配合数组和函数的案例) 一.60 指针-const修饰指针二 ...
黑马程序员最新版JavaWeb基础教程最后的案例学习记录
黑马程序员最新版JavaWeb基础教程最后的案例学习记录这里写自定义目录标题调试中我遇到的问题调试中我遇到的问题若db1报错: 则改成自己的数据库名称 web.xml报错:则用这一段代码 &l ...
基于VueAxios制作音乐播放器(bilibili黑马程序员Vue入门学习记录)
目录使用Vue制作一个音乐播放器前言 Vue Vue导入 Vue挂载 Vue指令 v-text v-html v-on v-show v-if v-bind v-for v-model axios ...
黑马程序员课程-Vue项目实战-Element-UI——电商后台管理系统主页制作
黑马程序员视频_主页制作目录一.主页布局 1.整体布局:先上下划分,再左右划分 2.主页header布局 3.左侧菜单布局:菜单分为两级,并且可以折叠二. 通过接口获取菜单数据 1.请求预处理 ...

天知道-网络应用-Vue小案例-黑马程序员

案例介绍

代码结构

分析

知识点学习

注意事项

项目再现

天知道-网络应用-Vue小案例-黑马程序员相关推荐

最新文章

热门文章