vue小案例---cnode

效果图:

代码:

接口文档地址:

CNode：Node.js专业中文社区

vuex:

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'Vue.use(Vuex)export default new Vuex.Store({state: {list:[]},mutations: {setlist(state,data){state.list = data}},actions: {async setData(state,tab){// +'&'+'limit=10'+'&'+'page=2'var res = await axios.get('https://cnodejs.org/api/v1/topics?tab='+tab);console.log(res.data.data);state.commit('setlist',res.data.data)}},modules: {}
})

HTML:

<template><div class="home"><div class="header"><router-link tag="li" :to="{ name: 'Home', query: { tab: 'all' } }"><span :class="{ active: qh == 'all' }">全部</span></router-link><router-link tag="li" :to="{ name: 'Home', query: { tab: 'good' } }"><span :class="{ active: qh == 'good' }">精选</span></router-link><router-link tag="li" :to="{ name: 'Home', query: { tab: 'share' } }"><span :class="{ active: qh == 'share' }">分享</span></router-link><router-link tag="li" :to="{ name: 'Home', query: { tab: 'ask' } }"><span :class="{ active: qh == 'ask' }">问答</span></router-link><router-link tag="li" :to="{ name: 'Home', query: { tab: 'job' } }"><span :class="{ active: qh == 'job' }">招聘</span></router-link><li><span>测试</span></li></div><div class="content"><li v-for="(items, keys) in $store.state.list" @click="tz(items.id)"><div class="img"><img :src="items.author.avatar_url" alt="" /></div><div v-if="items.top" class="zd">置顶</div><div v-if="!items.top" style="width: 0.1rem"></div><div class="text">{{ items.title }}<div style="position: absolute; top: 0.16rem; font-size: 0.1rem"><span style="color: #9e78c0">{{ items.reply_count }}</span><span style="margin: 0 0.02rem">/</span><span style="color: #b4b4b4">{{ items.visit_count }}</span></div></div><div class="sj"><!-- {{date(items.create_at).locale("zh-cn").fromNow()}} -->{{date(items.last_reply_at).locale('zh-cn').format('L LT')}}</div></li><span v-show="!$store.state.list" ref='sss'>暂无内容~~~~~~~</span></div></div>
</template>

CSS:

注意cssj使用scss写的

.header {margin-top: 0.05rem !important;width: 95%;height: 0.6rem;background: #fff;margin: 0 auto;display: flex;justify-content: space-between;border-bottom: 0.01rem solid #ccc;border-top-left-radius: 0.05rem;border-top-right-radius: 0.05rem;li {width: 15%;height: 0.6rem;// background: cyan;text-align: center;line-height: 0.6rem;cursor: pointer;span {padding: 0.03rem 0.07rem;color: #80bd01;font-size: 0.13rem;border-radius: 0.03rem;}.active {background: #80bd01;color: #fff;}}
}
.content {width: 95%;min-height: 1rem;// background: red;margin: 0 auto;li {width: 100%;height: 0.51rem;background: #fff;border-bottom: 0.01rem solid #ccc;display: flex;align-items: center;position: relative;.img {width: 0.3rem;height: 0.3rem;margin-left: 0.1rem;img {width: 100%;}}.text {width: 2rem;height: 0.3rem;font-size: 0.13rem;white-space: nowrap; /*内容超宽后禁止换行显示*/overflow: hidden; /*超出部分隐藏*/text-overflow: ellipsis; /*文字超出部分以省略号显示*/position: relative;}.zd {background: #80bd01;padding: 0.02rem 0.04rem;border-radius: 0.03rem;-webkit-border-radius: 0.03rem;-moz-border-radius: 0.03rem;-o-border-radius: 0.03rem;color: #fff;font-size: 0.12rem;margin: 0 0.05rem;}}.sj {position: absolute;min-width: 0.3rem;min-height: 0.1rem;// background: red;bottom: 0.05rem;right: 0.1rem;font-size: 0.1rem;color: #778087;}
}
.hd {width: 0.2rem;height: 0.9rem;background: #f5f5f5;position: fixed;z-index: 9;bottom: 0.1rem;right: 0rem;color: #808080;border-radius: 0.12rem 0 0 0.12rem;border: 1px solid #ccc;padding: 0.05rem 0 0 0.05rem;margin: auto;
}

js:

注意每条条数后面的时间是用插件写的 ----> day.js

import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import localizedFormat from "dayjs/plugin/localizedFormat";
import "dayjs/locale/zh-cn";
dayjs.extend(relativeTime);
dayjs.extend(localizedFormat);
export default {name: "Home",data() {return {qh: "all",date: "",btnFlag:Boolean};},methods: {tz(a) {console.log(a);this.$router.push({name: "About",params: {a,},});},},async beforeRouteUpdate(to,from,next) {this.qh = to.query.tab;await this.$store.dispatch("setData", this.qh);next();},created() {if (!this.$route.query.tab) {this.qh = 'all';this.$store.dispatch("setData", this.qh);}else{this.qh = this.$route.query.tab;this.$store.dispatch("setData", this.qh);}this.date = dayjs;}
};

vue小案例---cnode相关推荐

vue小案例（小黑记事本和购物车）
vue小案例小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
Vue小案例1：计数器
Vue小案例1:计数器 html页面: 准备两个按钮分别绑定两个事件对应加减add,sub:还有一个span容器放置数据,样式自己写没有太大要求 <div id="app"& ...
分析初识vue小案例
前言我们已经写好了一个案例:初识vue小案例接下来我们就分析初识vue小案例容器和vue实例是一一对应的! 容器和vue实例应该是一一对应的,不允许出现一对一或者一对多下面是一个一个容器对多个 ...
Vue小案例——图书列表
图书列表案例显示 HTML 结构 CSS 样式提供的静态数据把提供好的数据渲染到页面上对页面进行事件绑定逻辑层次的JS代码案例显示图书列表实现静态列表效果基于数据实现模板效果处里每 ...
Vue(小案例_vue+axios仿手机app)_实现用户评论
一.前言 1.渲染评论列表 2.点击加载按钮,加载更多 3.提交评论二.主要内容 1.评论列表一般是注册到一个全局的公共组件中 2.请求后台数据,渲染评论列表 (1)数据格式如下地址 /ap ...
Vue小案例之商品管理------创建页面与部分数据
logo的路径: 页面的初始布局: 初始的HTML: <div id="container"><div class= ...
Vue小案例之商品管理------添加商品
进行添加button,以及商品列表的创建 html: <div class="form-btn"><button>确认添加</button>&l ...
Vue小案例-小黑记事本的实现
小黑记事本综合应用了前面学习的集中指令,并且对指令进行综合性的基础应用联系.(样式没有写,仅实现了vue指令的功能.) <!DOCTYPE html> <html lang=&quo ...
axios vue 回调函数_Vue 02 —— Vue 入门小案例~使用 Axios 中的GET、POST请求
作为后端攻城狮,写前端代码是一种什么体验? 相信不少人和 @Python大星一样,有写过前端代码的经历. 记录一下,Vue 框架开发中"啼笑皆非"的故事,非专业前端人员,该案例无 ...
Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...

vue小案例---cnode

效果图:

代码:

接口文档地址:

vuex:

HTML:

CSS:

js:

vue小案例---cnode相关推荐

最新文章

热门文章