Preface
In the previous chapter, we successfully rendered the list page through basic construction. However, there are many problems. In this chapter, we will solve these problems.
Use v-bind to bind data.
In the previous chapter, we rendered the page. However, if the console is opened, you will find an error. As shown in the figure below:
This is because when the page comes in, our html code will be executed first, and at this time, our vue has not started working. Our code is as follows:
<li v-for="info in data"> <i> <img src="{{ info.author.avatar_url }}"> <span>{{ info.author.loginname }}</span> </i> <time>{{ info.create_at }}</time> <a href="content.html?{{ info.id }}">{{ info.title }}</a></li>As mentioned above, when the page parses src="{{ info.author.avatar_url }}", of course, this image path cannot be found. Therefore, an error will naturally occur. Therefore, we need to process this code. We modify it to
<img v-bind:src="info.author.avatar_url" v-bind:alt="info.author.loginname">
OK, let's refresh the page, this time, there is no error.
VUE knowledge points
v-bind binding attribute http://vuejs.org.cn/api/#v-bind
Replenish:
In fact, when we open the page, we can still see these {{ ... }} contents in an instant. Although this will not report an error, it still affects a little user experience. At this time, we can use v-text to output these contents. As above, we modify the code to the following:
<li v-for="info in data"> <i> <img v-bind:src="info.author.avatar_url" v-bind:alt="info.author.loginname"> <span v-text="info.author.loginname"></span> </i> <time v-text="info.create_at"></time> <a href="content.html?{{ info.id }}" v-text="info.title"></a></li>When we modify the code to this, all the problems are solved.
VUE knowledge points
v-text output text http://vuejs.org.cn/api/#v-text
Beautify time
The time format we get from the interface is like this 2016-06-12T06:17:35.453Z. Obviously, this is not the effect we want. The effect we want should be like this as published 2 hours ago. How to do it?
We need a function, which is used to give it a primitive string and then return a string we want.
The principle of this function is not our focus. I won't explain it here. I just look at the code as follows:
function goodTime(str){ var now = new Date().getTime(), oldTime = new Date(str).getTime(), difference = now - oldTime, result='', minute = 1000 * 60, hour = minute * 60, day = hour * 24, halfmonth = day * 15, month = day * 30, year = month * 12, _year = difference/year, _month = difference/month, _week = difference/(7*day), _day =difference/day, _hour =difference/hour, _min =difference/minute; if(_year>=1) {result= "Posted in" + ~~(_year) + "year ago"} else if(_month>=1) {result= "Posted in" + ~~(_month) + "month ago"} else if(_week>=1) {result= "Posted in" + ~~(_week) + "week ago"} else if(_day>=1) {result= "Posted in" + ~~(_day) + "day ago"} else if(_hour>=1) {result= "Posted in" + ~~(_hour) +" hour ago"} else if(_min>=1) {result= "Posted in" + ~~(_min) +" minute ago"} else result="Just"; return result;}The code has a part of borrowing from other people's code.
OK, now, we can use a goodTime(str) method function to modify the time format given to us by the interface to what we want. The question now is, how can we use this function?
Stupid method, directly modify the original data
First, we get the data through ajax, and then hand over the data to vue for rendering. Then we can perform an operation in the middle, process all the data, and then hand over the processed data to vue for rendering. This problem can be solved.
Just do it, let's look at the code:
function pushDom(data){ // First traversal and modify all the time in the data for (var i = 0; i < data.data.length; i++) { data.data[i].create_at = goodTime(data.data[i].create_at); }; // Then leave it to vue for rendering var vm = new Vue({ el: '.list', data: data });}OK, through the above processing, let’s take a look at the final page effect. As follows:
Success.
VUE custom filter method
Although we succeeded above, it is really not elegant to create a for loop directly before VUE. Moreover, we want to learn VUE, where is this the only way to learn...
OK, let's use VUE's custom filter function to process it.
Official tutorial, custom filter http://vuejs.org.cn/guide/custom-filter.html
function pushDom(data){ // Use vue custom filter to sculpt the time passed in the interface Vue.filter('time', function (value) { return goodTime(value); }) var vm = new Vue({ el: '.list', data: data });}And, we need to modify our html part as follows:
<time v-text="info.create_at | time"></time>
OK, the implementation effect is exactly the same. But the code looks much more elegant. The key is that in this process, we have learned and mastered the use of custom filters. In fact, in many cases, the data given to us by the interface is often not suitable for rendering directly on the page, so this function is very important and very commonly used.
summary
1.v-bind binding element attribute method
2.v-text output text method
3. Use of vue custom filters
appendix
VUE official website
cNodeJs API details
Download the source code of this series of tutorials
Chapter 1 of VUEJS Practical Tutorial, Building the Basics and Rendering the List
VUEJS practical tutorial Chapter 2, fix errors and beautify time
VUEJS practical tutorial Chapter 3, using the layout plug-in to realize pagination
This article was originally written by FungLeo
First release address: http://blog.csdn.net/FungLeo/article/details/51649074
This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.