阅读必看

本文章是使用于 刚入门vue3版本的新手参考。虽然这个东西出来又一段时间了，但是一直没有事件去研究， 网上虽然各种文章写的都相当精辟，详解onBeforeMount, reactive, ref, toRefs 什么什么的 ，当你作为一个新手看完，似曾有点那种带懂不懂的感觉，于是你心里就会有个想法，我拿一个接口来试试，像以前vue2一样尝试一下，我靠，结果没有那么顺利，简单的一个数据列表居然出不来，然后百思不得其解，找到了这篇文章，当你看完，我操，原来就这，是的就这

废话少说，直接说最常用的例子，
需求，进入页面，获取一个列表，点击分页，获取对应页数据。
自己去找一个接口，试试下面的例子 自己安装一下axios 全局挂载一下，将下面请求方法换成$axios.get 或者.post这种方式来应 ，这里懒得上抽离出去的代码了，我用的是以前项目的接口

效果图 

先安装一下emenent ui plus 这个都会吧，
修改一下main.js里面的内容

//默认vu3 脚手架自带的
// import { createApp } from 'vue'
// import App from './App.vue'
// import router from './router'
// import store from './store'
// createApp(App).use(store).use(router).mount('#app')


//修改后的
import { createApp, Vue } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';
import router from './router'
import store from './store'


const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.use(store)
app.mount('#app')

别问为什么，多看几遍不同之处，你自然懂了
直接拿Home.vue组件来说

一下代码axios 这里 请求封装不一一说，

Home.vue

<template>
  <div class="hello">
    <div class="list">
      2.实现数据获取
      <ul>
        <li v-for="(item, index) in arr" :key="index">
          <div class="imgs">
            <img :src="item.cover" alt="" />
          </div>
          <div class="text">
            <p>{{ item.name }}</p>
          </div>
        </li>
      </ul>
      <div style="clear:both"></div>
       <el-pagination background layout="prev, pager, next" :total="total" @current-change="handpage"></el-pagination>
    </div>
  </div>
</template>

<script>
import { onBeforeMount, reactive, ref, toRefs } from "vue";
//这里将请求抽离出去 ，当然你也可以在页面中直接使用$axios这样 ，直接在main,js中全局挂载
import { getHomeAllData } from "@/api/home";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup(props, { emit }) {
    let arr = ref([]);
    let page = ref(1); //当前页 
    let total = ref(0);

//请求需要的参数
    const parms = reactive({
      cursor: page, 
      size: 10,
      testTypeId: 0,
      subjectId: 0,
      clazzLevel: 0,
      classType: 0,
      className: "",
    });
 
    //生命周期
    onBeforeMount(() => {
      lista();
    });

    const lista = () => {
    //发送请求 
      getHomeAllData(parms)
        .then((res) => {
          arr.value = res.data;   //赋值  用ref 生命的需要加value 当然你也可以用reactive 声明一个数组
          total.value = res.totalCount
        })
        .catch((error) => {
          
        });
    };

   //分页点击
    const handpage = (e) => {
      //改变分页
        page.value =e;
        //再次获取数据  在vu3 中取消了this这个东西， 这里直接像我们原先写传统js 中的方法直接 `方法名()`直接调用
        lista();
    }


    return {
    //所声明的变量  方法必须导出才能使用
     //数据
      arr,  parms, page, total,// ...toRefs(parms),
     //方法
     handpage,lista
     
    };
  },
};
</script>
<style scoped>
.list {
  width: 100%;
  background: rgb(228, 220, 220);
}
.list ul li {
  width: 300px;
  height:260px;
  list-style: none;
  float: left;
  margin: 10px 10px;
   box-shadow:inset 0 0 10px 0px rgba(0, 0, 0, 0.14);
   cursor: pointer;
}
.list ul li .imgs{
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.imgs img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
  transition: all 0.6s;  
}

.imgs img:hover{
     transform: scale(1.1);  
  }

.text{
  width: 100%;
  height: 60px;
  font-size: 14px;
  margin: 2px 2px;
  color: #333;
  font-weight: normal;
}
</style>

白嫖怪 代码都拿走了。 赞也不点一个

**

点赞是唯一跟新的动力

**