黑马vue案例-天气查询

最新推荐文章于 2024-07-25 11:00:49 发布

ぃ咔哇依°ヽ

最新推荐文章于 2024-07-25 11:00:49 发布

阅读量136

点赞数

分类专栏：前端文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_44887198/article/details/133991484

版权

前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文章目录

B站视频链接
axios基本使用
axios加Vue
案例-天知道

B站视频链接

axios基本使用

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>

<body>
  <input type="button" value="get请求" class="get">
  <input type="button" value="post请求" class="post">
  <script>
    document.querySelector(".get").onclick = function () {
      alert("get请求");
      axios.get("https://api-vue-base.itheima.net/api/joke/list?num=3")
        .then(function (response) {
          console.log(response);
        }, function (err) {
          console.log(err);
        });
    }

    document.querySelector(".post").onclick = function () {
      alert("post请求");
      axios.post("https://api-vue-base.itheima.net/api/user/reg", { username: "张三" })
        .then(function (response) {
          console.log(response);
        }, function (err) {
          console.log(err);
        });
    }
  </script>
</body>

</html>

axios加Vue

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <style>
    #box {
      width: 640px;
      height: 480px;
      border: 1px solid black;
      margin: 0 auto;
      text-align: center;
    }

    #box input {
      width: 100px;
      height: 48px;
      border-radius: 24px;
      font-size: 20px;
      margin-top: 40px;
    }

    #box p {
      width: 320px;
      height: 240px;
      border: 1px solid black;
      margin: 50px auto;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div id="box">
    <input type="button" value="获取笑话" @click="getJoke">
    <p>{{joke}}</p>
  </div>
  <script>
    const app = new Vue({
      el: "#box",
      data: {
        joke: '这是一个很搞笑的笑话！哈哈哈！'
      },
      methods: {
        getJoke() {
        //axios回调函数中的this已经改变，无法访问到data中的数据
        //把this保存起来，回调函数中直接使用保存的this即可
          let that = this;
          axios.get('https://api-vue-base.itheima.net/api/joke')
            .then(function (response) {
              console.log(response.data);
              that.joke = response.data;
            }, function (err) {
              console.log(err);
            });
        }
      }
    });
  </script>
</body>

</html>

案例-天知道

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天气查询</title>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="box">
    <h1>天气查询</h1>
    <div>
      <input type="text" placeholder="请输入查询的天气" v-model="city" @keyup.enter="getWeather()">
      <button class="get" @click="getWeather()">搜索</button>
    </div>
    <div class="hotCity">
      <a href="#" v-for="(item,index) in hotCity" @click="getHotCityWeather(index)">{{item}}</a>
    </div>
    <ul class="weatherList">
      <li v-for="(item,index) in weatherList" :key="item.data">
        <p>{{item.wea}}</p>
        <p>{{item.narrative}}</p>
        <p>{{item.date}} {{item.week}}</p>
      </li>
    </ul>
  </div>

  <script>
    const app = new Vue({
      el: "#box",
      data: {
        weatherList: [],
        city: '',
        hotCity: ['北京', '上海', '广州', '深圳']
      },
      methods: {
        getWeather() {
          let that = this;
          if (that.city === "") {
            alert('请输入想要查询的城市！！！');
            return;
          }
          axios.get(`http://ajax-api.itheima.net/api/weather?city=${that.city}`)
            .then(function (response) {
              console.log(response.data.data.data);
              that.weatherList = response.data.data.data;
            }, function (err) {
              console.log(err);
            });
          console.log(that.weatherList);
        },
        getHotCityWeather(id) {
          this.city = this.hotCity[id];
          console.log(this.city);
          this.getWeather();
        }
      },
      mounted() {
        document.querySelector("input").focus(); // 获取焦点
      }
    });
  </script>
</body>

</html>