七、VueJs 填坑日记之渲染一个列表

在上一篇博文中,我们对vue组件有了一个简单的认识和大概的理解。在之前认识项目结构的时候,我们在/src目录中创建了一个components的文件夹,而今天就要用到了,这个文件夹的作用就是放置我们的自定义组件。

制作header.vue组件 在components文件夹中,创建一个header.vue的文件,然后填入以下内容:

<template>
    <header class="header">
        <h1 class="logo">Vue Demo by 王二麻子</h1>
    </header>
</template>

这样我们的header组件就已经简单的制作完了。

制作footer.vue 组件 同样在components文件夹中,创建一个footer.vue的文件,然后填入以下内容:

<template>
    <footer class="copy">
        Copy © 王二麻子
    </footer>
</template>

非常的简单。到此我们已经把组件制作完成了,接下来要将组件运用到首页里去。

编写index.vue文件 废话少说,打开/src/pages/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 () {
      		var v = this
		v.$api.get('topics', null, function (r) {
		  v.list = r.data
		})
    }
  }
}
</script>

到这里我们就把列表渲染出来了。我们来看一下实际的效果:

前面一片文章已经让我们对 vue 组件进了简单的认识,在这里就不在赘述,接下来的分析只挑一些重点来说明。

vue指令 如下,我先用了一个 v-for 的循环,来循环数据,在time标签中又使用了v-text,而这些都是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>

router-link 是 VueRouter2 “声明式导航”的写法,在实际转换为 html 标签的时候,会转化为 <a></a>,里面的 to 属性,就相当于 a 的 href 属性。 更多关于vue指令的信息请参见:https://cn.vuejs.org/v2/api/#指令 更多关于声明式导航的资料请参见:https://router.vuejs.org/zh-cn/essentials/getting-started.html

获取数据 我们从接口拿到了 r.data 的数据,让我们自己定义的 this.list 等于这个数据,然后我们在模板中就可以用 list 进行渲染了。这里着重体现了 vue 的数据双向绑定的特性。

var v = this
v.$api.get('topics', null, function (r) {
  v.list = r.data
})

时间处理工具函数

我们在上面的代码用到time标签来渲染时间,但是目前来看我们的时间是一个标准的时间格式,对于用户体验来说不是特别理想。所以我们需要把时间来处理一下。为了能让整个项目所有的时间都共用一个工具,我们来编写/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>

然后,我们再来看一下实际的效果:

不知道大家有没有发现,我们在 script 区域,引用一个函数是使用 this.getData 或者 this.list 这样的代码引用的。但是在 template 中,我们是不加 this 的。在 js 中,关于 this 的论文就很多,我这里不深入讲解了。大家只要记住这样用就可以了。到此列表就已经渲染出来了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开源优测

[接口测试 - 基础篇] 08 封装个基本的excel解析类

概述 本文基于openpyxl封装一个excel解析类,请注意,不采用Python的任何高级特性,就简简单单的一个类,实现excel的一些基本操作,并演示如何...

3549
来自专栏大前端_Web

深入理解JS异步编程五(脚本异步加载)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1133
来自专栏葡萄城控件技术团队

带你走近AngularJS - 体验指令实例

带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创...

1865
来自专栏lestat's blog

同一页面巧妙使用多个element-ui的upload组件

3944
来自专栏安恒网络空间安全讲武堂

writeup | 应该不是 XSS

0x01 初步分析阶段 首先拿到题目,看到留言板,第一反应就是XSS。 但是看过题目提示后,有些不确定。 所以开始分析整道题目。 首先,观察network页面,...

4086
来自专栏ThoughtWorks

你不知道的高性能JAVASCRIPT | TW洞见

想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影。 本文会分享一些高效的JavaScript的最佳实践,提高大家对...

3395
来自专栏腾讯Bugly的专栏

基于 Webpack & Vue & Vue-Router 的 SPA 初体验

最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场。 backbone,angularjs 已成昨日黄花,reactjs 如日...

3675
来自专栏大前端_Web

javascript运行机制:并发模型 与Event Loop

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

1071
来自专栏Spark学习技巧

Kafka源码系列之源码解析SimpleConsumer的消费过程

Kafka源码系列是以kafka 0.8.2.2源码为例讲解。浪尖纯属个人爱好,才写想写这个系列。希望对kafka的使用者们带来帮助。 一,消费者消费的过程讲解...

3237
来自专栏开源优测

Robot Framework | 02 从抛弃RIDE开始创建你的RFS测试

概述 大多数情况下,我们用RobotFramework时,一般基于其图形界面的RIDE来编辑、管理、执行用例。 今天我们分享下基于非编辑器模式的RobotFra...

3229

扫码关注云+社区