渲染首页分类内容
前面我们已经把数据获取回来了,接下来,我们应该渲染一下,其实就是让我们的Html页面显示出来
我们应该在哪个声明周期方法去拉取数据呢?
可以去官网了解一下
asyncData 方法
asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用
这是官方原话
从上面的图我们也可以知道,这个方法调用以后,才是render(绘制,渲染)
所以,我们可以在这个方法上去拉取数据。
asyncData() {
console.log("test load data....");
return api.getRecommendCategories().then(result => {
if (result.code === 10000) {
return {categories: result.data};
} else {
//TODO:处理错误
}
});
}
数据回来以后,怎么处理呢?
数据渲染
<template>
<section class="container">
<div class="center-box">
<div class="recommend-category-box">
<ul class="clear-fix">
<li :class="index!==0?'float-left':'float-left recommend-menu-active'" v-for="(item,index) in categories"
:key="index">
{{item.favorites_title}}
</li>
</ul>
</div>
</div>
</section>
</template>
或者这样写
<template>
<section class="container">
<div class="center-box">
<div class="recommend-category-box">
<ul class="clear-fix">
<li :class="index!==0?'float-left':'float-left recommend-menu-active'" v-for="(item,index) in categories"
:key="index" v-text="item.favorites_title">
</li>
</ul>
</div>
</div>
</section>
</template>
全部部代码
<template>
<section class="container">
<div class="center-box">
<div class="recommend-category-box">
<ul class="clear-fix">
<li :class="index!==0?'float-left':'float-left recommend-menu-active'" v-for="(item,index) in categories"
:key="index" v-text="item.favorites_title">
</li>
</ul>
</div>
</div>
</section>
</template>
<script>
import AppLogo from '~/components/AppLogo.vue'
import api from '../utils/api';
export default {
components: {
AppLogo
},
asyncData() {
console.log("test load data....");
return api.getRecommendCategories().then(result => {
if (result.code === 10000) {
return {categories: result.data};
} else {
//TODO:处理错误
}
});
}
}
</script>
<style>
.recommend-menu-active {
border-bottom: #c9302c 2px solid;
color: #c9302c !important;
}
.recommend-category-box li {
font-size: 16px;
cursor: pointer;
margin-left: 20px;
color: #8c8c8c;
margin-right: 20px;
}
.recommend-category-box {
height: 60px;
margin-top: 30px;
margin-bottom: 30px;
background: #fff;
line-height: 58px;
box-shadow: 0 5px 10px #d4d4d4;
}
.recommend-category-box ul {
list-style: none;
}
</style>
运行结果
到这里我就把首页菜单内容渲染完成了。
你可以右键查看一下源码,页面里会有相关的数据,如此一来,则有利于于搜索引擎收录。