1.综合页(首页)

Home.vue

<!-- 首页 -->
<template>
<div>
<!-- 顶部 标题栏 -->
<app-header></app-header>
<!-- 选项卡 -->
<tab :line-width="2" v-model="index">
<tab-item :selected="tag === item" v-for="item in taglist" @click="tag = item" :key="item.id">{{item}}</tab-item>
</tab>
<!-- 资讯 -->
<div v-if="index === 0"><news-list></news-list></div>
<div v-if="index === 1"><blog-list></blog-list></div>
<div v-if="index === 2"><question-list></question-list></div>
<div v-if="index === 3"><event-list></event-list></div>
</div>
</template> <script>
// 引入 顶部标题栏组件
import AppHeader from '../../components/Header'
// 引入 选项卡组件
import { Tab, TabItem } from 'vux'
// 资讯
import NewsList from './NewsList'
// 博客
import BlogList from './BlogList'
// 问答
import QuestionList from './QuestionList'
// 活动
import EventList from './EventList' export default {
name: 'Home',
components: {
AppHeader,
Tab,
TabItem,
NewsList,
BlogList,
QuestionList,
EventList
},
data(){
return {
tag: '资讯',
taglist: ['资讯','博客','问答','活动'],
index: 0
}
}
}
</script> <style lang="less" scoped></style>

2.效果图

vue2.0 + vux (四)Home页的更多相关文章

  1. vue2.0 + vux (六)NewsList 资讯页 及 NewsDetail 资讯详情页

    设置代理,避免出现跨域问题 /*设置代理,避免出现跨域问题*/ proxyTable: { '/api':{ target: 'https://www.oschina.net/action/apiv2 ...

  2. vue2.0 + vux (三)MySettings 页

    1.MySettings.vue <!-- 我的设置 --> <template> <div> <img class="img_1" sr ...

  3. vue2.0 + vux (五)api接口封装 及 首页 轮播图制作

    1.安装 jquery 和 whatwg-fetch (优雅的异步请求API) npm install jquery --save npm install whatwg-fetch --save 2. ...

  4. vue2.0 + vux (二)Footer组件

    1.Footer组件 Footer.vue <!-- 底部 footer --> <template> <div> <tabbar> <!-- 综 ...

  5. vue2.0 + vux (一)Header 组件

    1.main.js import Vue from 'vue' import FastClick from 'fastclick' import VueRouter from 'vue-router' ...

  6. vue2.0 + vux 项目搭建

    1.快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架 默认为 webpack2 模板,如果你需要使用webpa ...

  7. 基于Vue2.0+Vue-router构建一个简单的单页应用

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...

  8. 项目vue2.0仿外卖APP(四)

    组件拆分 先把项目搭建时生成的代码给清了吧 现在static目录下引入reset.css 接着在index.html引入,并且设置<meta> 有时候呢,为了让代码符合我们平时的编码习惯, ...

  9. 适用初学者:vue2.0构建单页应用最佳实战

    参考:https://segmentfault.com/a/1190000007630677 自己gitHub项目地址:https://github.com/shixiaoyanyan/vue-wor ...

随机推荐

  1. 以前刷过的FFT

    Gym - 101667H 2017-2018 ACM-ICPC, Asia Daejeon Regional Contest #include<bits/stdc++.h> using ...

  2. 2017"百度之星"程序设计大赛 - 初赛(B)

    Chess  Accepts: 1805  Submissions: 5738  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 32768 ...

  3. hdu2094 stl之set的应用

    产生冠军 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. 【bzoj2346】[Baltic 2011]Lamp 堆优化Dijkstra

    题目描述 2255是一个傻X,他连自己家灯不亮了都不知道.某天TZ大神路过他家,发现了这一情况,于是TZ开始行侠仗义了.TZ发现是电路板的问题,他打开了电路板,发现线路根本没有连上!!于是他强大的脑力 ...

  5. IDA动态调试技术及Dump内存

    IDA动态调试技术及Dump内存 来源 https://blog.csdn.net/u010019468/article/details/78491815 最近研究SO文件调试和dump内存时,为了完 ...

  6. IE6 IE7下li间距、高度不一致问题(转)

    http://www.phpddt.com/dhtml/926.html 问题描述:li的高度在IE6 IE7间距高度和其他浏览器不一致,即便设定了高度,IE6,7中,仍比其他浏览器要高. 解决方法: ...

  7. 洛谷P3625 - [APIO2009]采油区域

    Portal Description 给出一个\(n\times m(n,m\leq1500)\)的矩阵,从中选出\(3\)个互不相交的\(k\times k\)方阵,使得被选出的数的和最大. Sol ...

  8. BZOJ1880 [Sdoi2009]Elaxia的路线 【最短路 + dp】

    题目 最近,Elaxia和w的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间.Elaxia和w每天都要奔波于宿舍和实验室之间,他们 希望在节约时间的前提 ...

  9. 刷题总结——小c找朋友(bzoj4264 集合hash)

    题目: Description 幼儿园里有N个小C,两个小C之间可能是朋友也可能不是.所有小C之间的朋友关系构成了一个无向图,这个无向图中有M条边. 园长ATM发现对于两个(不同的)小Ci和j,如果其 ...

  10. 欧拉函数之和(51nod 1239)

    对正整数n,欧拉函数是小于或等于n的数中与n互质的数的数目.此函数以其首名研究者欧拉命名,它又称为Euler's totient function.φ函数.欧拉商数等.例如:φ(8) = 4(Phi( ...