浅入深出Vue:文章列表
终于到我们小项目的最后一个功能了,那就是列表页展示!
新建组件
先来新建组件 List.vue
:
<template>
<div></div>
</template>
<script>
export default {
name: "List"
}
</script>
<style scoped>
</style>
然后添加对应的路由对象:
{
path: '/list',
name: 'list',
component: () => import('./views/List.vue')
}
编写页面代码
这里我们选择 ElementUI
中的 Table
组件来进行展示,文章列表接口的数据定义如下:
{
"Code": 200,
"Message": "后台返回的消息",
"Data": [
{
"Id": 0, //文章的ID
"Title": "标题",
},
...
]
}
<template>
<div>
<el-row>
<el-table :data="list">
<el-table-column prop="Id" label="#">
</el-table-column>
<el-table-column prop="Title" label="标题">
</el-table-column>
</el-table>
</el-row>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "List",
data() {
return {
list: [],
}
},
mounted() {
this.init()
},
methods: {
init() {
axios.get('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/list')
.then(res => {
this.list = res.data.Data
})
}
}
}
</script>
<style scoped>
</style>
效果如下:
这个效果不是很好看啊。 用 el-col
控制一下大小看看:
<template>
<div>
<el-row>
<el-col :span="16" :offset="4">
<el-table :data="list">
<el-table-column prop="Id" label="#" width="80px">
</el-table-column>
<el-table-column prop="Title" label="标题" align="center">
</el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</template>
这样看起来就好很多了。
最后
最后让我们在基础布局那加上发布和登录的按钮吧:
<template>
<div id="app">
<el-container>
<el-header style="text-align:center;">
<span>浅入深出Vue-入门篇</span>
<span style="float: right;">
<el-button type="primary" size="mini" icon="el-icon-edit">发布文章</el-button>
<el-button type="default" size="mini">登录</el-button>
</span>
</el-header>
<el-main>
<router-view/>
</el-main>
</el-container>
</div>
</template>
最后的效果:
浅入深出Vue:文章列表的更多相关文章
- 浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置
浅入深出Vue之工具准备(二):PostMan安装配置 由于家中有事,文章没顾得上.在此说声抱歉,这是工具准备的最后一章. 接下来就是开始环境搭建了~尽情期待 工欲善其事必先利其器,让我们先做好准备工 ...
- 浅入深出Vue:前言
浅入深出Vue系列文章 之前大部分是在做后端,后来出于某些原因开始接触Vue.深感前端变化之大,各种工具.框架令人眼花缭乱.不过正是这些变化,让前端开发更灵活. 博主在刚开始时,参考官网的各个步骤以及 ...
- 浅入深出Vue:环境搭建
浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直 ...
- 浅入深出Vue:工具准备之WebStorm安装配置
浅入深出Vue之工具准备(一):WebStorm安装配置 工欲善其事必先利其器,让我们先做好准备工作吧 导航篇 WebStorm安装配置 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版 ...
- 浅入深出Vue系列
浅入深出Vue导航 导航帖,直接点击标题即可. 文中所有涉及到的资源链接均在最下方列举出来了. 前言 基础篇 浅入深出Vue:工具准备之WebStorm搭建及配置 浅入深出Vue之工具准备(二):Po ...
- 浅入深出Vue:代码整洁之封装
深入浅出vue系列文章已经更新过半了,在入门篇中我们实践了一个小小的项目. <代码整洁之道>一书中提到过一句话: 神在细节中 这句话来自20世纪中期注明现代建筑大师 路德维希·密斯·范·德 ...
- 浅入深出Vue:第一个页面
今天正式开始入门篇,也就是实战了~ 首先我们是要做一个博客网站,UI 框架采用江湖传闻中的 ElementUI,今天我们就来利用它确定我们博客网站的基本布局吧. 准备工作 新建一个vue项目(可以参考 ...
- 浅入深出Vue:文章编辑
登录与注册功能都已经实现,现在是时候来开发文章编辑功能了. 这里咱们就使用 markdown 作为编辑语言吧,简洁通用.那么我们就需要找一下 markdown 的编辑器组件了,而且还要支持 vue噢. ...
- 浅入深出Vue:自动化路由
在软件开发的过程中,"自动化"这个词出现的频率是比较高的.自动化测试,自动化数据映射以及各式的代码生成器.这些词语的背后,也说明了在软件开发的过程中,对于那些重复.千篇一律的事情. ...
随机推荐
- 【AMAD】django-allauth
简介 个人评分 简介 django-allauth1集成的Oauth API包括: Amazon (OAuth2) AngelList (OAuth2) Bitly (OAuth2) Dropbox ...
- MariaDB知识点总结03--从主+多主集群
一.从主架构 1.从主复制原理 从库生成两个线程,一个I/O线程,一个SQL线程: i/o线程去请求主库 的binlog,并将得到的binlog日志写到relay log(中继日志) 文件中:主库会生 ...
- lua程序设计(第4版)第二章习题
练习2.1:修改八皇后问题的程序,使其在输出第一个解后即停止运行. 解法:要使得有一个解就返回,首先要获得一个解,然后再返回或停止运行 练习2.2:解决八皇后问题的另一种方式是,先生成1-8之间的所有 ...
- layui checkbox , radio 清除所有选中项
方法: $(selector).prop('cjecked', false); form.render(); 使用示例: // 清除radio选中 $('input[name=ymd]').prop( ...
- Redis基础与持久化
Redis介绍 软件说明 Redis是一款开源的,ANSI C语言编写的,高级键值(key-value)缓存和支持永久存储NoSQL数据库产品. Redis采用内存(In-Memory)数据集(Dat ...
- SQLServer启动和关闭bat脚本
原文:SQLServer启动和关闭bat脚本 安装完毕SQL SERVER 2005后,会默认自动启动SQL Server等几个服务,这几个服务比较占用系统资源.当不运行SQL Server时,最 ...
- csp模拟赛低级错误及反思
\(csp\)模拟赛低级错误及反思. 1.没开\(longlong\). 反思:注意数据类型以及数据范围. 2.数组越界(前向星数组未开两倍,一题的数据范围应用到另一题上,要开两倍的写法为开两倍数组) ...
- Python基础『二』
目录 语句,表达式 赋值语句 打印语句 分支语句 循环语句 函数 函数的作用 函数的三要素 函数定义 DEF语句 RETURN语句 函数调用 作用域 闭包 递归函数 匿名函数 迭代 语句,表达式 赋值 ...
- h5中的结构元素header、nav、article、aside、section、footer介绍
结构元素不具有任何样式,只是使页面元素的的语义更加明确. header元素 header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容.header元素通常用来放置 ...
- 怎样使用 v-for ?
v-bind / v-on / v-if / v-for , 这四个指令应该是 vue 里面最常用的了, 之前已经简单记录的前三个的使用方法, 接下来就记一下 v-for 的基本用法. 1. v-fo ...