Vuejs Real-field construction and render list (1) _javascript tips

Objective

My JavaScript level is more general. Well, it's pretty general. Therefore, for the latest front-end framework technology, it is a little difficult, but the reality I have to face. Therefore, learning is the only way out.

Vertical comparison of n section of the front frame, the final choice of Vue, why? The reasons are as follows:
1.angular The future is unknown, 1.x learning curve is high, and seems to be abandoned, and 2 has not been officially launched.
2.react more powerful, but no contact.
3.VUE simple, through the hands-on, more suitable for my thinking and level.
4.vue has a Chinese document, I look more comfortable.

Since the decision to learn Vue, then the best way to learn is the actual combat. It's convenient to see the cnodejs.org Forum have a public API available. So I decided to use this public API to write a demo.

Introduction to Interfaces

This is a publicly available interface for cnodejs.org. Of course, he is not just used to give us the front end. It can be used on a variety of programs. The interface address is HTTP://CNODEJS.ORG/API through this page, detailing the relevant content.

The interfaces they provide are complete, which means that we can do a forum like them through these interfaces.

Project plan
1. Make a list page, you can read the Cnodejs list content.
2. Make a detail page, click on the link in the list page, and enter the details page.
3. The use of SSI technology to achieve the reuse of HTML code. Related content Search ssi+shtml understand.
4.css code is precompiled using SASS.

File directory

├─index.shtml Render List Page
├─content.shtml Rendering Details page
├─inc Fragmented files
│├─bar.html Sidebar Code
│├─footer.html Copyright Section Code
│├─head.html Head Area call JS and other code
│└─header.html Header logo and navigation code
└─res resource File
├─image
├─js
│├─common My Code Directory
││├─common.js Public Execution JS
││└─method.js Custom Method JS
│├─jquery jquery Source Directory
│├─plugins Other Plugins directory
││└─laypage Laypage Paging Plugin
│└─vue Vue Source Directory
└─style
├─style.scss Sass Source Files
├─style.css a compiled CSS file
├─base
└─scss

Download my source file https://github.com/fengcms/vue-cNodeJsOrgTest

Start writing code

First of all, according to the above file directory design, began to write files inside. Res is a resource directory, you can look at it a little bit, or you can know what's inside.

In fact, the focus is index.shtml and content.shtml two documents.

Prepare first page List HTML file

<! DOCTYPE html>  

As the code above, I first write out the static page. With my CSS, the effect is as shown in the following illustration:

Complete code please get from GitHub inside
introduction of Vue&jquery and other JS files

<script src= "Res/js/jquery/jquery-2.2.3.min.js" ></script>
<script src= "Res/js/vue/vue.min.js" ></script>
<script src= "Res/js/common/common.js" ></script>

Getting data from an interface

First of all, anyway, we have to get the data from the interface before we can go down. We use the Ajax method of jquery to get the data back.

The following code:

$ (function () {
 $.ajax ({
 type: ' Get ',
 URL: ' http://cnodejs.org/api/v1/topics ',
 dataType: ' JSON ',
 success:function (data) {
 if (data.success) {
 console.log (data)
 }else{
 alert ( Json.stringify (data));
 }
 ,
 error:function (data) {
 alert (json.stringify (data);
 }
 )
; })

Code as above, we look at the browser console, screenshot as follows:

As shown in the figure above, we have successfully obtained the data.

Analyze data

As shown in the figure above, the data contains the following contents
1. The author
1. Author Avatar URL
2. Author User name
2. Author ID
3. Post Content
4. Release time
5. Whether it is the essence
6. Post ID
7. Last reply time
8. Number of replies
9. Attribution Label
10. Post Title
11. Whether the top
12. Browse Statistics

The data interface is as above. Of course, these data are useful if you are doing a full-featured forum. And in my project, a lot of it is not. Let's see what I need.

<li>
 <i class= "User_ico" >
 
 <span> User name </span>
 </i>
 <time class= "Time" > Published 5 days ago </time>
 <a class= "Talk" href= "content.html? Link ID" > post title </a>
</li>

As shown in the code above, we need to loop through the contents including
1. Author Avatar URL
2. Author User name
3. Release time
4. Post ID
5. Post Title

No problem, all the content we need, the interface is all there.

Encapsulating Ajax Code

Ajax code is not long, but I look very uncomfortable. So, I use the following code to encapsulate

Ajax Get JSON method
function Getjson (url,func) {
 $.ajax ({
 type: ' Get ',
 Url:url,
 dataType: ' JSON ',
 success:function (data) {
 if (data.success) {
 func (data);
 } else{
 alert ("Interface call failed");
 }
 ,
 error:function (data) {
 alert (json.stringify (data);}}
 );
}

As above, where needed, we just need to use the Getjson (url,func) function on it.

Referencing encapsulated code

$ (function () {
 var url = ' Http://cnodejs.org/api/v1/topics ';
 Getjson (url,function (data) {
 console.log (data);});

After that, let's take a look and see if we can print out the data we need, as shown in the following illustration:

Without any problems, we are still getting the data. We're encapsulating the callback function and changing it to the following code.

$ (function () {
 var url = ' Http://cnodejs.org/api/v1/topics ';
 Getjson (url,pushdom);
});
function Pushdom (data) {
 console.log (data);
}

Well, if there is no error, it is absolutely possible to print out the interface data. After this operation, our code is extremely concise, and the readability is greatly increased. And what we're going to do next is to do it in the Pushdom function.

Vue Rendering Code

First, we need to write the data we want to insert in a Vue way on the page.

HTML code Section

<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>1

Vue Knowledge points
Cyclic data http://vuejs.org.cn/api/#v-for

JS Code section

function Pushdom (data) {
 var vm = new Vue ({
 el: '. List ',
 data:data
 });
}

Let's take a look at the effect:

OK, very excited, just a few lines of code, we successfully use Vue to render the list.

Summary
1.ajax getting data is key
2. Understand a little bit of vue content, you can get started.
3. When building a project, the code and files must be clear and unambiguous.

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.