[b]前言[/b] 在[url=http://www.1sucai.cn/article/86457.htm]上一章[/url]中,我们通过基础的搭建,成功的渲染了列表页面.但是,其中的问题是很多的.这一章,我们来解决这些问题. [b]使用 v-bind 绑定数据.[/b] 上一章的代码,我们渲染出来了页面.但是如果打开了控制台,你会发现有错误.如下图所示: [img]http://files.jb51.net/file_images/article/201606/2016061310464858.jpg[/img] 这是因为页面进来的时候,会先执行我们的html代码,而此时,我们的vue还没开始工作.而我们的代码如下: 如上,页面去解析 src="{{ info.author.avatar_url }}"的时候,当然是找不到这个图片路径的.因此,自然而然会出错.因此,我们需要来处理一下这个代码.我们修改为 <img v-bind:src="info.author.avatar_url" v-bind:alt="info.author.loginname"> 好,我们刷新一下页面,这一次,就没有报错了. [b]VUE知识点[/b] v-bind 绑定属性 http://vuejs.org.cn/api/#v-bind [b]补充:[/b] 其实,我们打开页面的时候,还是可以在一瞬间看到这些 {{ ... }} 的内容.虽然这个不会报错,但是还是影响了一点点用户体验.这个时候,我们可以用 v-text 来输出这些内容,如上,我们把代码修改为如下: 当我们把代码修改成这样之后,所有的问题就都解决了. [b]VUE知识点[/b] v-text 输出文本 http://vuejs.org.cn/api/#v-text [b]美化时间[/b] 我们从接口获取的时间格式是这样的2016-06-12T06:17:35.453Z,很显然,这不是我们想要的效果.我们想要的效果应该是这样的 发表于2小时之前 这样的效果.怎么做呢? 我们需要一个函数,这个函数的作用是给他一段原始的字符串,然后返回一个我们想要的字符串. 关于这个函数的原理,不是我们的重点,这里不解释,直接看代码如下: 代码有借鉴别人的代码的部分. 好,现在,我们可以通过一个goodTime(str)的方法函数,来将接口给我们的时间格式修改为我们想要的.现在的问题就是,我们怎么来用这个函数了. 笨方法,直接修改原始数据 首先,我们通过ajax拿到了数据,然后再把数据交给vue进行渲染.那我们在这个中间可以进行一个操作,把所有的数据全部处理一遍,然后把处理过的数据再交给vue去渲染.就可以解决这个问题了. 说干就干,我们看代码: 好,通过上面的处理,我们再来看一下最终的页面效果.如下: [img]http://files.jb51.net/file_images/article/201606/2016061310464859.jpg[/img] 成功了. [b]VUE自定义过滤器方法[/b] 上面虽然我们成功了.但是,直接在VUE之前搞了一个for循环,实在是有点不太优雅.而且,我们要学习VUE啊,这算哪门子学习呢…. 好,我们下面用VUE的自定义过滤器功能来进行处理. 官方教程,自定义过滤器 http://vuejs.org.cn/guide/custom-filter.html 并且,我们需要修改我们的html部分,如下: <time class="time"  v-text="info.create_at | time"></time> 好,实现效果是一模一样的.但是代码看上去优雅了很多.关键是,我们在这个过程中,学习和掌握了自定义过滤器的使用.其实,在很多情况下,接口给我们的数据往往是不适合直接在页面中渲染的,所以这个功能就是非常重要并且非常常用的了. [b]小结[/b]  1.v-bind 绑定元素属性方法  2.v-text 输出文本方法  3.vue 自定义过滤器的使用 [b]附录[/b] [url=http://vuejs.org.cn/]VUE官方网站[/url] [url=http://cnodejs.org/api]cNodeJs Api 详细介绍 [/url] [url=https://github.com/fengcms/vue-cNodeJsOrgTest]本系列教程源码下载[/url] [url=http://www.1sucai.cn/article/86457.htm]VUEJS 实战教程第一章,构建基础并渲染出列表 [/url] [url=http://www.1sucai.cn/article/86461.htm]VUEJS 实战教程第二章,修复错误并且美化时间 [/url] [url=http://www.1sucai.cn/article/86463.htm]VUEJS 实战教程第三章,利用laypage插件实现分页[/url] 本文由FungLeo原创 首发地址:[url=http://blog.csdn.net/FungLeo/article/details/51649074]http://blog.csdn.net/FungLeo/article/details/51649074[/url] 本文已被整理到了《[url=http://www.1sucai.cn/Special/874.htm]Vue.js前端组件学习教程[/url]》，欢迎大家学习阅读。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。