vue的axios应用

riverrun_z

已于 2022-05-24 10:28:10 修改

阅读量58

点赞数

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

于 2022-05-24 10:02:46 首次发布

本文链接：https://blog.csdn.net/weixin_48047636/article/details/124941066

版权

vue 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

获取数据

<template>
  <div>
    <button @click="getDate">获取数据</button>
    <br>
    <br>
    <!-- template是虚拟容器 一个包围的作用 对css布局无影响 -->
    <template v-if="data">
      <!-- 遍历data.data.archives中的数组 -->
      <div class="item" v-for="ar in data.data.archives" :key="ar.aid">
        <!-- public/index.html添加去除防盗链 -->
        <img :src="ar.pic" alt="" />
        <span>{{ ar.title }}</span>
        <div>
          <span>{{ ar.stat.view }}</span>
          <span>{{ ar.stat.danmaku }}</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
// 1.单独引入
import axios from 'axios'
export default {
  //把请求的数据存到本地
  data() {
    return {
      data: null
    }
  },
  //点击事件触发方法,methods(手动触发)或者computed(自动)
  methods: {
    getDate() {
      const url = 'http://api.xin88.top/bilibili/news.json'
      axios.get(url).then((res) => {
        console.log(res)
        this.data = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item{
  display: inline-block;
  user-select: none;
  width: 200px;
  margin: 4px;
   
   >img{
     width: 100%;
     border-radius: 4px;
   }
   >span{
     overflow: hidden;
     //超出宽度部分 不换行 
     white-space:nowrap;
    //  超出部分加...
    text-overflow: ellipsis;
    width: 100%;
    display: inline-block;
   }
   >div>span{
     display: inline-block;
     width: 50%;
     color: grey;
     font-size: 0.8em;
   }
}
</style>

添加防盗链

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- 添加防盗链 -->
    <meta name="referrer" content="no-referrer">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

点击按钮后获得请求得到的res

在这里插入图片描述

请求并显示到页面成功

在这里插入图片描述

riverrun_z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的axios应用

获取数据<template> <div> <button @click="getDate">获取数据</button>  <template v-if="data">  <div v-for="ar in data.dat
复制链接

扫一扫