Vue笔记整理，让你快速入门Vue.js：04_4.网络应用：（项目）天知道-介绍-回车查询

最新推荐文章于 2024-04-12 08:55:43 发布

被开发耽误的大厨

最新推荐文章于 2024-04-12 08:55:43 发布

阅读量528

点赞数

分类专栏： web前端（H5）

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/106858558

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

（1）创建vue实例、导入js文件、监听回车键事件

（2）进行双向数据绑定

（3）在Vue实例方法中，通过 axios 调用接口获取数据

问题：response.data.data.forecast 来源？

一、前言

上一节我们介绍了axios+vue的基本使用，其中接口的调用步骤、数据的获取方式都和我们之前开发步骤类似，需要注意的是 axios响应成功的回调函数中，this改变了，我们需要提前保存，然后使用保存的那个值就可以了。详情可参考博文：Vue笔记整理，让你快速入门Vue.js：04_3.网络应用：axios+vue结合使用那么如果逻辑再复杂一些呢？

咱们这一节就来学习一个网络应用：天知道

二、实例代码验证

1、实现思路

天知道是一个查询天气的应用，应用的核心是查询天气，那么怎么查询呢？

1.1、回车查询

（1）按下回车

其中事件的绑定我们可以使用 v-on 指令，并且限制按键为回车，通过事件修饰符来进行约束。

（2）查询数据

接口的调用我们通过 axios，获取用户的输入我们可以通过 v-model 来实现。

（3）渲染数据

最终生成的结果，它是一个列表结构，那么我们要通过 v-for 指令，结合一个数组就可以啦。

数组的赋值，我们放在请求成功的回调函数中，this 已经不是之前那个了，这个时候我们就需要额外的保存一个 that。

天气的信息是通过调用接口获取到的，接口文档如下：

1.2、代码实现

（1）创建vue实例、导入js文件、监听回车键事件

创建vue实例，定义方法【main.js】

var app = new Vue({
    el: "#app",//通过 el 把vue实例，挂载给元素
    methods: {//方法定义
        searchWeather: function () {
            console.log('天气查询');
        }
    },
})

导入自己的 js 文件【模板.html】

    <!-- 导入自己的js -->
    <script src="./js/main.js"></script>

@keyup.enter="searchWeather" 监听回车键，指定触发的方法为 searchWeather【模板.html】

<input type="text" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气"/>

（2）进行双向数据绑定

声明变量，要查询的城市【main.js】

    data: {
        city: '',//声明变量，要查询的城市
    },

input 输入框 v-model="city"，拿到输入的内容【模板.html】

<input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气"/>

在方法里面，拿到输入框输入的内容【main.js】

    methods: {//方法定义
        searchWeather: function () {
            console.log('天气查询');
            console.log(this.city);//拿到输入框输入的内容
        }
    },

（3）在Vue实例方法中，通过 axios 调用接口获取数据

methods: {//方法定义
        searchWeather: function () {
            console.log('天气查询');
            console.log(this.city);//拿到输入框输入的内容

            // 调用接口
            var that = this;// 保存this
            //city的值，进行了双向数据绑定，输入框输入内容，回车按键监听，即可获取到
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
                .then(function (response) {
                    console.log(response);
                    console.log(response.data.data.forecast);

                    //给空数组赋值
                    //因为是回调函数，this已经改变了。所以用that保存一下，然后再如下调用
                    that.weatherList = response.data.data.forecast
                    
                })
                .catch(function (err) { })
        }

    },

问题：response.data.data.forecast 来源？

（1）谷歌浏览器---》检测---》输入“北京”按回车

（2）console.log(response);

查看通过 response 查看服务器返回的内容，如下：

即 response.data.data.forecast 能获取到相应数据

三、具体代码

1、模板.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>天知道</title>
  <!--
  1、link 引入
  text/css： 纯文本css代码
  2、rel 做什么用  
  stylesheet:样式表
  3、href 引入的是什么？
  MyStyle.css
  -->
  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <div class="wrap" id="app">


    <div class="search_form">
      <div class="logo"><img src="img/logo.png" alt="logo" /></div>
      <div class="form_group">
        <!-- city在Vue实例中声明定义，通过v-model进行双向数据绑定 -->
        <!-- @keyup.enter="searchWeather" 监听回车键，指定触发的方法为 searchWeather -->
        <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气"/>
        <button class="input_sub">搜 索</button>
      </div>

      <div class="hotkey">
        <a href="javascript:;">北京</a>
        <a href="javascript:;">上海</a>
        <a href="javascript:;">广州</a>
        <a href="javascript:;">深圳</a>
      </div>
    </div>


    <!-- 天气信息 -->
    <ul class="weather_list">
      <!-- weatherList在Vue实例中声明定义，通过axios调用接口，获得实际数据 -->
      <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>
  
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <!-- 导入自己的js -->
  <script src="./js/main.js"></script>
    
</body>

</html>

2、main.js

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

  1. 点击回车
  2. 查询数据
  3. 渲染数据
  */
var app = new Vue({
    el: "#app",//通过 el 把vue实例，挂载给元素
    data: {
        city: '',//声明变量，要查询的城市
        weatherList: []//声明一个空数组
    },
    methods: {//方法定义
        searchWeather: function () {
            console.log('天气查询');
            console.log(this.city);//拿到输入框输入的内容

            // 调用接口
            var that = this;// 保存this
            //city的值，进行了双向数据绑定，输入框输入，回车按键监听，即可获取到
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
                .then(function (response) {
                    console.log(response);
                    console.log(response.data.data.forecast);

                    //给空数组赋值
                    //因为是回调函数，this已经改变了。所以用that保存一下，然后再如下调用
                    that.weatherList = response.data.data.forecast
                    
                })
                .catch(function (err) { })
        }

    },
})

四、内容-总结

被开发耽误的大厨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue笔记整理，让你快速入门Vue.js：04_4.网络应用：（项目）天知道-介绍-回车查询

一、前言上一节我们介绍了axios+vue的基本使用，其中接口的调用步骤、数据的获取方式都和我们之前开发步骤类似，需要注意的是 axios响应成功的回调函数中，this改变了，我们需要提前保存，然后使用保存的那个值就可以了。那么如果逻辑再复杂一些呢？咱们这一节就来学习一个网络应用：天知道天知道是一个查询天气的应用，应用的核心是查询天气，那么怎么查询呢？二、实例代码验证1、实现思路@keyup.enter 监听回车键更新中。。。...
复制链接

扫一扫