阅读必看
本文章是使用于 刚入门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>
白嫖怪 代码都拿走了。 赞也不点一个
**
点赞是唯一跟新的动力
**