黑马vue案例-天气查询

文章目录

  • 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>Documenttitle>
  <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>Documenttitle>
  <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>

你可能感兴趣的:(前端,vue.js,javascript,ecmascript)