How to use ajax to render a page in vue.js-JS Tutorial-php.cn

How to use ajax to render a page in vue.js

亚连

Release： 2018-06-06 11:17:14

Original

2907 people have browsed it

Below I will share with you an example of vue.js and ajax rendering pages. It has a good reference value and I hope it will be helpful to everyone.

About what I mentioned last time, we use vue.js, zepto, node.js, webpack and other technologies to reconstruct CNode. This is a relatively entry-level project. Generally, you can get started after learning Vue. The CNode website has a public API, so you can obtain all the data interfaces of this website, then render them on the page and process them with CSS. At first, I always felt that it was very difficult, very difficult, very difficult. Although I couldn’t tell where the difficulty was, I just felt that it was very difficult, very difficult, very difficult. Let me elaborate, isn't it just to use ajax to get the data, then pass it to the component for rendering, and then imitate it and write the style. It's not difficult, but why do I naturally find it difficult?

CNode gives us a data interface, and ajax only has a few methods. Later, I thought about it carefully and found that the place of fear in my heart was ajax. Yes, you gave me the data interface and I can get the data, but what did you give me? Before using it, I didn't know the data obtained by ajax. People are always afraid of what they don’t know! As my classmates said, I thought ajax was difficult before, but later I found it was fine when I used it. I think most beginners' confusion about ajax often lies in their fear of the unknown nature of the data they obtain.

Since we are afraid of its unknown nature, we might as well take a good look at this "data"! Here I am using zepto’s Ajax method (learn it now and use it now).

let data = { 
 page: 1, 
 limit: 20,//获取20个 
 tab: &#39;all&#39;, 
 mdrender: true 
}; 
let topics = []; 
$.get("https://cnodejs.org/api/v1/topics", data, function (res) { 
   if (res && res.data) { // 如果查到数据 
   topics = res.data; 
   } 
  })

Copy after login

Then enter topics in the Console

ajax obtains the Json format. As shown in the figure above, we can see that 20 "objects" of the Json type are obtained. Each object has So many attributes. For example, I want to get the title of the first object

Now you should have seen through the data obtained by ajax. I feel that after taking this small step, the whole person feels relaxed.

Strike while the iron is hot and simply use vue to render a page.

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <script src="http://zeptojs.com/zepto.js"></script> 
 <script src="vue.js"></script> 
</head> 
<body> 
<p id="app"> 
 <ul> 
  <li v-for="(item,i) in items" :key="item.id">  
   <span class="index" :title="i + 1">{{(i + 1) > 9999 ? "..." : (i + 1)}}</span> 
   <span class="face"> 
     <img :src="item.author.avatar_url" alt="" :title="item.author.loginname" width="80" height="80" /> 
   </span> 
   <span class="name" :title="item.title">{{item.title}}</span></li> 
 
 </ul> 
</p> 
<script src="Ajax-demo1.js"></script> 
</body> 
</html>

Copy after login

JS：

new Vue({ 
 el: &#39;#app&#39;, 
 data:{ 
  items:[], 
  scroller:null, 
  tip:{ 
    page: 1, 
    limit: 20, 
    tab: &#39;all&#39;, 
    mdrender: true 
  } 
 }, 
 methods:{ 
  getData(){ 
   let self = this; 
   $.get("https://cnodejs.org/api/v1/topics", this.tip, function (res) { 
    if (res && res.data) { // 如果查到数据 
    self.items = res.data; 
   } 
  }) 
  } 
 }, 
 created:function() { 
  this.getData(); 
  console.log("success"); 
 }, 
 mounted:function() { 
 
 } 
})

Copy after login

emmmmm, There is a small problem that I have to mention. AJAX is an asynchronous function (you can read my last blog about asynchrony). Its callback function execution environment is the global scope, so in getData, this of AJAX points to the window. There are two solutions to this, one is to use self to save this like me, and the other is to use the arrow function to bind this.

Many times, we are often afraid of the unknown, and this fear often prevents us from taking the step to defeat the unknown. At this time, just bite the bullet and take a step forward. Difficulties will always only exist in the mind. inside.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement the data-driven view principle through vuejs

##How to use parent components to call child component events in Vue

How to implement the password display and hide switching function in vue

The above is the detailed content of How to use ajax to render a page in vue.js. For more information, please follow other related articles on the PHP Chinese website!