vue中请求接口数据和页面懒加载

最新推荐文章于 2024-09-06 22:20:29 发布

深山里的山鬼

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量250

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2301_77822157/article/details/137203669

版权

本文描述了一个使用Vue.js构建的新闻列表页面，通过App.vue中的代码展示了如何使用axios从http://hmajax.itheima.net/api/news接口获取数据并动态加载到页面上。展示了如何在组件中使用v-loading指令控制加载状态。

摘要由CSDN通过智能技术生成

案例:新闻列表页面加载，调用接口为黑马：http://hmajax.itheima.net/api/news

代码放在App.vue中

<template>
    <div class="main">
    <div class="box" v-loading="isLoading">
      <ul>
        <li v-for="item in list" :key="item.id" class="news">
          <div class="left">
            <div class="title">{{ item.title }}</div>
            <div class="info">
              <span>{{ item.source }}</span>
              <span>{{ item.time }}</span>
            </div>
          </div>

          <div class="right">
            <img :src="item.img" alt="">
          </div>
        </li>
      </ul>
    </div>
    <div class="box2" v-loading="isLoading2"></div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data(){
    return{
      list:[],
      isLoading:true,
      isLoading2:true
    }
  },
 created(){
  axios.get('http://hmajax.itheima.net/api/news')
        .then(response => {
          // 处理响应数据
          // console.log(response);
          setTimeout(()=>{
             this.list = response.data.data
             this.isLoading = false
          },2000)
        })
        .catch(error => {
          // 处理错误情况
          console.log(error);
        });
  },
  directives:{
    loading:{
      // inserted钩子中,判断指令的值,设置默认状态
      inserted(el,binding){
        binding.value ? el.classList.add('loading') : el.classList.remove('loading')
      },
      // update钩子中,判断指令的值,更新类名状态
      update(el,binding){
        binding.value ? el.classList.add('loading') : el.classList.remove('loading')
      }
    }
  }
}
</script>

<style>
.loading:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff url('./assets/loading.gif') no-repeat center;
}

.box2 {
  width: 400px;
  height: 400px;
  border: 2px solid #000;
  position: relative;
}



.box {
  width: 800px;
  min-height: 500px;
  border: 3px solid orange;
  border-radius: 5px;
  position: relative;
}
.news {
  display: flex;
  height: 120px;
  width: 600px;
  margin: 0 auto;
  padding: 20px 0;
  cursor: pointer;
}
.news .left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 10px;
}
.news .left .title {
  font-size: 20px;
}
.news .left .info {
  color: #999999;
}
.news .left .info span {
  margin-right: 20px;
}
.news .right {
  width: 160px;
  height: 120px;
}
.news .right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>