vue的axios全局引入的应用

全部代码

<template>
  <div>
    <!-- 9.如果请求到的data为true 则让它显示到页面-->
    <template v-if="data">
      <!-- 10.先整体一个item的div,以此为基础遍历data的数据-->
      <div class="item" v-for="ar in data.subjects" :key="ar.id">
        <!-- 11.整体的div里面包裹的div  -->
        <img :src="ar.cover" alt="" />

        <!-- 12.整体div下的div,并包裹两个span标签 -->
        <div>
          <!-- 如果拿到的数据is_new是false 则不显示新这个字 -->
          <span class="new" v-if="ar.is_new">新</span>
          <span>{{ ar.title }}</span>
          <span>{{ ar.rate }}</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
// 1.引入axios
/*下面这个是单独引入先注释
要用全局引入的话,要先在main中把axios存进vue的原型链,再在
向服务器请求的语句前面添加this.axios.get().then,因为vue里面已经有了axios,
所以直接在前面加this就可以,this指的就是vue*/
//import axios from 'axios'
export default {
  // 8.把请求到的数据赋值给本地
  data() {
    return {
      data: null
    }
  },
  // 6.利用生命周期mounted让页面不请求就显示到页面
  mounted() {
    // 在vue后台看有没有找到axios
    console.log(this)
    this.getData()
  },
  //2. methods添加getDate方法
  methods: {
    getData() {
      // 3.创建变量储存url地址
      const url = 'http://api.xin88.top/douban/movies.json'
      // 4.向服务器请求数据
      this.axios.get(url).then((res) => {
        // 5.打印出请求到的数据
        console.log(res)
        // 7.把请求到的数据赋值给本地
        this.data = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item {
  width: 200px;
  margin: 10px;
  display: inline-block;

  > img {
    width: 100%;
    // height: 250px;
  }

  > div {
    display: flex;
    justify-content: center;

    > .new {
      padding: 5px;
      background-color: rgb(85, 201, 153);
    }
  }
}
</style>

请求成功的结果

要提前准备的环境

1. vue的项目包,需在项目部路径npm run serve启动
2. axios的安装.在项目包路劲cmd输入命令npm i axios vue-axios安装