七、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 = thisv.$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 - oldTimelet result = ''let minute = 1000 * 60let hour = minute * 60let day = hour * 24let month = day * 30let year = month * 12let _year = difference / yearlet _month = difference / monthlet _week = difference / (7 * day)let _day = difference / daylet _hour = difference / hourlet _min = difference / minuteif (_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 的论文就很多，我这里不深入讲解了。大家只要记住这样用就可以了。到此列表就已经渲染出来了。

转载于:https://www.cnblogs.com/xinhudong/p/7883546.html

七、VueJs 填坑日记之渲染一个列表相关推荐

Vue入门到上手（10）—— VueJs 填坑日记之在项目中使用Amaze UI
Vue入门到上手(10)-- VueJs 填坑日记之在项目中使用Amaze UI 上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI).先来介绍一下妹子UI.Ama ...
八、VueJs 填坑日记之参数传递及内容页面的开发
我们在上一篇博文中,渲染出来了一个列表,并在列表中使用了router-link标签,标签内的:to就是链接地址,昨天咱们是<router-link :to="'/content/' + ...
[单片机][at32][填坑日记] [USB卡包] usb快速发包导致卡包
文章目录一.问题现象 1. 发送频率过快,导致pc或mcu未能及时应答每一包,造成缓存区遗留上一次数据. 2. usb频发拔插枚举,导致pc/mcu数据丢失, ①mcu丢失数据,每次发送都只能发送上 ...
[单片机][at32][填坑日记] [USB卡包] usb上电过程中快速发包导致卡包(终章)
文章目录一.原因造成如下: 1. 串口外设优先级大于USB中断(USBOTG_IRQn),导致串口数据打断USB,致使PC或MCU丢包. 2. 当PC请求usb设备描述符字符串时,USB的其他通道不 ...
android多语言插件,Android 7.0多语言适配，填坑日记（附多语言插件）
背景最近项目在适配7.0系统的时候发现一些问题,其中也有多语言适配的问题,就拿出来说说,记记笔记,填填坑. 问题1 因为刚接手项目不久,发现一些奇奇怪怪的bug总是让人头疼,最近发现了在华为荣耀7. ...
WindowsPhoneWindows8.1Windows8Unity3d 填坑日记
最近的游戏开发大体上接近尾声,总结了不少关于Unity3d面向Windows几大平台开发时遇到的各种坑以及如何填坑的经验.总的来说,Windows8.1 Windows8/RT以及WindowsPho ...
20150726 填坑日记
三中内填坑: 1. 组合数递推什么的 C(m,n)=C(m,n-1)+C(m-1,n-1).填了个大坑,以前没认真听课QAQ 2. 裸题过河卒 3. 缺角正方形摆放车统计,分上下部分,枚举上部分放几个 ...
Hadoop Dynamometer工具详细教程，填坑日记
Dynamometer工具使用步骤 Dynamometer 介绍准备"材料" 原理注意事项流程 1.fsimage 2.hadoop binary 3.Configurati ...
C4D/MAYA导入Unity填坑以及C4D渲染自我心得
自我学习进程中, @1 C4D/MAYA的动作导入到Unity里可以只导入骨骼动作. @2 动作需要预留1帧T-Pose让Unity骨骼匹配绑定. @3 可能还存在骨骼问题,重新Unity进行骨骼匹配 ...
【踩坑日记 · Web】一个斜杠引发的悲剧
1. 起因最近使用php做一个小项目,需要在后台获取 post 数据并进行处理. 网站文件结构如下: web ├─test │ └─index.php index.php <?phpvar_d ...

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

七、VueJs 填坑日记之渲染一个列表相关推荐

最新文章

热门文章