Vuejs Combat Repair errors and landscaping time (2) _javascript tips

Objective

In the previous chapter, we successfully rendered the list page through the Foundation building. However, the problems are many. In this chapter, we solve these problems.

Use V-bind to bind data.

The previous chapter of the code, we render out the page. But if you open the console, you will find errors. The following illustration shows:

This is because when the page comes in, it executes our HTML code, and at this point our Vue hasn't started working yet. And our code is as follows:

<li v-for= "info in Data" >
 <i class= "User_ico" >
 
 <span>{{info.author.loginname}}</span>
 </i>
 < Time class= "Time" >{{info.create_at}}</time> <a class= "talk" href=
 {info.id}} " >{{info.title}}</a>
</li>

As above, the page to parse src= "{{Info.author.avatar_url}}" when, of course, can not find this picture path. So, naturally, there will be mistakes. So we need to deal with this code.

OK, we refresh the page, this time, there is no error.

Vue Knowledge points

V-bind Binding Properties http://vuejs.org.cn/api/#v-bind

Add:

Actually, when we open the page, we can still see the contents of these {{...}} in a flash. Although this does not give an error, it still affects a little user experience. This time, we can use V-text to output the content, as above, we modify the code as follows:

<li v-for= "info in Data" >
 <i class= "User_ico" >
 
 <span v-text= "Info.author.loginname" ></span>
 </i >
 <time class= "Time" v-text= "Info.create_at" ></time>
 <a class= "Talk" href= "content.html" ? {{info.id}} ' v-text= ' Info.title ></a>
</li>

When we modify the code so that all the problems are solved.

Vue Knowledge points

V-text output Text http://vuejs.org.cn/api/#v-text

Landscaping Time

The time format we get from the interface is such a 2016-06-12t06:17:35.453z, obviously, it's not what we want. The effect we want is to be like this in 2 hours ago. How do you do that?

We need a function that functions by giving him a primitive string and then returning a string that we want.

The principle of this function, not our focus, here does not explain, directly look at the code is as follows:

function Goodtime (str) {
 var now = new Date (). GetTime (),
 oldtime = new Date (str). GetTime (),
 difference = now- Oldtime,
 result= ',
 minute = 1000, hour = minute *, day
 = Hour *,
 halfamonth = day * 15,
   month = Day *, Year
 = month *,

 _year = difference/year, _month =difference/month
 ,
 _week =diff erence/(7*day),
 _day =difference/day, _hour =difference/hour
 ;
 if (_year>=1) {result= "posted on" + ~ ~ (_year) + "Years ago"}
 else if (_month>=1) {result= "posted on" + ~ ~ (_month) + "months ago"}
   else if (_week>=1) {result= "posted" + ~ ~ (_week) + "Weeks Ago"}
 else if (_day>=1) {result= "posted on" + ~ ~ (_day) + "days Ago"}
   else if (_hour>=1) {result= "posted" + ~ ~ (_hour) + "Hours Ago"}
 else if (_min>=1) {result= "posted on" + ~ ~ (_min) + "Minutes Ago"}
 else result= "just";
 return result;
}

Code is part of the code that draws on others.

OK, now, we can use a Goodtime (str) method function to change the interface to our time format for what we want. Now the question is, how do we get this function?

Stupid method, directly modify the original data

First of all, we get the data through Ajax, and then put the data to Vue for rendering. Then we can do an operation in the middle, all the data processing, and then the processed data to Vue to render. We can solve this problem.

Say dry, we look at the code:

function Pushdom (data) {
 ///First traversal, change 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 give it to Vue to render the
 var vm = new Vue ({
 el: '. List ',
 data:data
 });

OK, through the above processing, we will look at the final page effect. as follows:

It worked.

Vue Custom Filter method

Although we succeeded. However, it is a bit less elegant to make a for loop directly before Vue. And, we have to learn Vue ah, this is what kind of study?

OK, we're going to do this with the Vue custom Filter feature.

Official tutorial, custom filter http://vuejs.org.cn/guide/custom-filter.html

 function Pushdom (data) {
 ///Use Vue custom filter to reshape the time passed in the interface
 vue.filter (' Times ', function (value) {return
 Goodtime (value);
 })
 var vm = new Vue ({
 el: '. List ',
 data:data
 });

Also, we need to modify our HTML section as follows:

<time class= "Time" v-text= "Info.create_at | Time "></time>

Well, the effect is exactly the same. But the code looks a lot more elegant. The key is that we learn and master the use of custom filters in this process. In fact, in many cases, the interface to our data is often not suitable for direct rendering in the page, so this function is very important and very common.

Summary
1.v-bind Binding Element Property method
2.v-text Output Text method
The use of 3.vue custom filters

Appendix

Vue official website
Cnodejs Api Detailed Introduction
This series of tutorials source download

Vuejs actual Combat Tutorial Chapter One, build the foundation and render out the list
Vuejs Combat Tutorial Chapter II, repair errors and beautify time
Vuejs actual Combat Tutorial Chapter III, the use of laypage plug-ins to achieve pagination

This article by Fungleo original

Starting Address: http://blog.csdn.net/FungLeo/article/details/51649074

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.