Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先
来源:互联网 发布:数据库升级策略 编辑:程序博客网 时间:2024/05/22 10:38
Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先
前情回顾
在上一篇博文《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件》中,我们队 vue
组件应该有了一个简单的认识。如果你去看了官方文档的话,再看这篇博文会比较简单。如果你没去看,呵呵,恭喜你,我喜欢你这样的人。
好,这章开始,真的得写点东西了。
制作 header.vue 和 footer.vue 组件文件。
不是本篇文章的重点,但是还是有比较讲一下。在第三篇博文中,我们规划了我们的项目文件结构,当时保留了一个 components
的空文件夹。这里,就是准备放我们的自定义组件的。
首先,我们去创建两个空文本文件,分别是 header.vue
文件和 footer.vue
文件。
然后,往里面输入下面的内容:
header.vue
<template> <header class="header"> <h1 class="logo">Vue Demo by FungLeo</h1> </header></template>
footer.vue
<template> <footer class="copy"> Copy © FungLeo </footer></template>
非常简单的两个文件,表示我们的组件已经弄好了。
编写 src/page/index.vue 文件
少啰嗦,看东西:
<template> <div> <Header></Header> <div class="article_list"> <ul> <li v-for="i in list"> <time v-text="i.create_at"></time> <router-link :to="'/content/' + i.id"> {{ i.title }} </router-link> </li> </ul> </div> <Footer></Footer> </div></template><script>import Header from '../components/header.vue'import Footer from '../components/footer.vue'export default { components: { Header, Footer }, data () { return { list: [] } }, created () { this.getData() }, methods: { getData () { this.$api.get('topics', null, r => { this.list = r.data }) } }}</script>
如上,代码,我就把页面渲染出来了。我们看下实际的效果:
前面一片文章已经让我们认知了 vue
组件了。这里我不过多的阐述,省得嫌弃我啰嗦。我只挑几个重点来讲一下:
<li v-for="i in list"> <time v-text="i.create_at"></time> <router-link :to="'/content/' + i.id"> {{ i.title }} </router-link></li>
如上,我先用了一个 v-for
的循环,来循环数据。这里可以参考:https://cn.vuejs.org/v2/api/#v-for 文档。
在 time
标签中,我使用了 v-text="i.create_at"
来渲染时间数据。参考文档: https://cn.vuejs.org/v2/api/#v-text
router-link
是 VueRouter2
“声明式导航”的写法,在实际转换为 html
标签的时候,会转化为 <a></a>
,里面的 to
属性,就相当于 a
的 href
属性。参考文档:https://router.vuejs.org/zh-cn/essentials/getting-started.html
好,html
的部分就说到这里,更多的内容,就交给你们自由发挥去吧。
this.$api.get('topics', null, r => { this.list = r.data})
2017年09月19日补充 不用箭头函数,用普通函数怎么写这段代码
评论区,有人问用普通函数如何写这段内容。这个是 js
的基础内容,和 vue
本身无关。
示例代码如下:
var v = thisv.$api.get('topics', null, function (r) { v.list = r.data})
补充结束
由于有了前面几篇文章的积累,这里就比较好理解了。
我们从接口拿到了 r.data
的数据,让我们自己定义的 this.list
等于这个数据,然后我们在模板中就可以用 list
进行渲染了。这里着重体现了 vue
的数据双向绑定的特性。
写一个公用的时间处理工具函数
如上面的图片所示,由于拿到的数据是一个标准的时间格式,直接渲染在页面上,这个效果不是很理想。因此,我们可以把时间给处理一下,然后再渲染出来。
这里,我们可以直接在 getData () {...}
后面再写一个方法即可。但是,在一个项目中,如果所有的地方都是这样的时间格式,我们在每一个组件中都来写这样的处理方法,很显然就显得我们比较愚蠢了。
因此,我们可以独立出来写一个方法,然后在所有的地方都可以使用,这样就比较方便了。
还记得我们在第三篇博文中,我们建立了一个 src/utils/index.js
的空文本文件吗?这里,我们要用上了。
编写 src/utils/index.js 文件
直接给代码如下:
export default { goodTime (str) { let now = new Date().getTime() let oldTime = new Date(str).getTime() let difference = now - oldTime let result = '' let minute = 1000 * 60 let hour = minute * 60 let day = hour * 24 let month = day * 30 let year = month * 12 let _year = difference / year let _month = difference / month let _week = difference / (7 * day) let _day = difference / day let _hour = difference / hour let _min = difference / minute if (_year >= 1) { result = '发表于 ' + ~~(_year) + ' 年前' } else if (_month >= 1) { result = '发表于 ' + ~~(_month) + ' 个月前' } else if (_week >= 1) { result = '发表于 ' + ~~(_week) + ' 周前' } else if (_day >= 1) { result = '发表于 ' + ~~(_day) + ' 天前' } else if (_hour >= 1) { result = '发表于 ' + ~~(_hour) + ' 个小时前' } else if (_min >= 1) { result = '发表于 ' + ~~(_min) + ' 分钟前' } else { result = '刚刚' } return result }}
好,代码恶心了点,我拿我以前写的代码改的,没有深入优化,大家就随便看看,大概就是这么个东西。
写好代码之后,我们保存文件。但是此时,我们还不能使用我们的这个方法函数。我们必须在 main.js
中将我们的方法函数给绑定上。如下代码:
// 引用工具文件import utils from './utils/index.js'// 将工具方法绑定到全局Vue.prototype.$utils = utils
还记得我们先前是如何将我们的接口请求函数给绑定上的吗?这里其实是采用了同样的方法。如果不记得了,可以点击链接过去看看。
好了,这样,我们写的这个函数,就可以随便被我们调用了。我们再来修改一下我们上面的 index.vue
中的代码,将 time
调整为:
<time v-text="$utils.goodTime(i.create_at)"></time>
然后,我们再来看一下实际的效果:
好,我们已经看到,时间已经搞的挺好的了。
样式,不是我这个
demo
的重点,所以,样式自己去写吧。我就不写了。
不知道大家有没有发现,我们在 script
区域,引用一个函数是使用 this.getData
或者 this.list
这样的代码引用的。但是在 template
中,我们是不加 this
的。
在 js
中,关于 this
的论文就很多,我这里不深入讲解了。大家只要记住这样用就可以了。
好,我们的列表已经渲染出来了。终于见了点真章,应该很激动了吧。下面,我们继续。
如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。
本文由 FungLeo 原创,允许转载,但转载必须保留首发链接。
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十一)阶段性小结
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
- Vue2+VueRouter2+Webpack+Axios构建项目实战2017重制版(一)基础知识概述
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地
- 网易2017秋招编程题集合
- 微信群发功能
- FATAL ERROR: Could not find ./bin/my_print_defaults的解决办法
- ScrollView
- 史上最简单的 MySQL 教程(二十九)「外键(下)」
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先
- Java总结---继承(不断完善ing..)
- maven 引入外部jar包的几种方式
- 迁移学习-Transfer Learning
- List Set Map简单理解
- Spring Boot 系列(1) 微服务介绍
- NOIP 提高组 2005
- 拓扑排序模板
- 漫谈程序员系列:一张图道尽程序员的出路 (转载程序视界)