快捷導(dǎo)航

vue.js,ajax渲染頁(yè)面的實(shí)例

更新時(shí)間：2018年02月11日 08:58:02 作者：Meikongggg

下面小編就為大家分享一篇vue.js,ajax渲染頁(yè)面的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

關(guān)于上次說(shuō)的用vue.js，zepto，node.js,webpack等技術(shù)重構(gòu)CNode。這是一個(gè)比較入門(mén)的項(xiàng)目，一般你學(xué)完vue就可以上手了，CNode網(wǎng)站有公開(kāi)的API所以你可以獲取這個(gè)網(wǎng)站的所有數(shù)據(jù)接口，然后渲染到頁(yè)面上，用CSS等加工一下就可以了。起初，我一直感覺(jué)好難好難好難，雖然說(shuō)不出難在哪里，就感覺(jué)好難好難好難。讓我細(xì)說(shuō)，不就是用ajax獲取數(shù)據(jù)，然后傳到組件上渲染嗎，再模仿著寫(xiě)樣式不就好了嗎。是不難啊，可是為什么我心里天然覺(jué)得很難呢？

CNode是給了我們數(shù)據(jù)接口，ajax也就那么幾個(gè)方法。后來(lái)我仔細(xì)想想，發(fā)現(xiàn)了內(nèi)心恐懼的地方是ajax。是啊，給了我數(shù)據(jù)接口，我能獲取到數(shù)據(jù)，但是你給了我什么??？在沒(méi)用之前，對(duì)于ajax獲取到的數(shù)據(jù)我是未知的。人總對(duì)自己未知的東西感到恐懼！就像同學(xué)說(shuō)的，ajax我之前以為很難的啊，后來(lái)我用起來(lái)感覺(jué)也沒(méi)什么啊。我想，大部分初學(xué)者對(duì)于ajax的困惑往往就在于對(duì)他獲取到的數(shù)據(jù)的未知性的恐懼。

既然恐懼它的未知性，那么我們不妨好好看看這個(gè)“數(shù)據(jù)”！這里我用的是zepto的Ajax方法（現(xiàn)學(xué)現(xiàn)用嘛）。

let data = { 
 page: 1, 
 limit: 20,//獲取20個(gè) 
 tab: 'all', 
 mdrender: true 
}; 
let topics = []; 
$.get("https://cnodejs.org/api/v1/topics", data, function (res) { 
   if (res && res.data) { // 如果查到數(shù)據(jù) 
   topics = res.data; 
   } 
  })

然后在Console輸入topics

ajax獲取到的是Json格式，如上圖所示，我們可以看到獲取到了20個(gè)Json類(lèi)型的“對(duì)象”，每個(gè)對(duì)象有那么多個(gè)屬性。比如我要獲取第一個(gè)對(duì)象的title

現(xiàn)在你應(yīng)該看穿了ajax獲取到的那個(gè)數(shù)據(jù)了吧，感覺(jué)這一小步邁出去后，整個(gè)人都輕松了。

趁熱打鐵，簡(jiǎn)單的用vue渲染一個(gè)頁(yè)面。

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> 
<div 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> 
</div> 
<script src="Ajax-demo1.js"></script> 
</body> 
</html>

JS：

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

emmmmm，有個(gè)小問(wèn)題得說(shuō)下，AJAX是異步函數(shù)（關(guān)于異步可以去看我上一篇博客），它的回調(diào)函數(shù)執(zhí)行環(huán)境是全局作用域，所以在getData中AJAX的this指向的是window。這有兩個(gè)解決方法，一個(gè)是像我這樣的用self把this存起來(lái)，還有一種就是用箭頭函數(shù)this綁定。

很多時(shí)候，我們往往對(duì)未知的事物感到恐懼，而這個(gè)恐懼往往阻礙我們邁出戰(zhàn)勝未知的那一步，這時(shí)候咬咬牙，邁出去就好了，困難永遠(yuǎn)都只存在于腦子里。

以上這篇vue.js,ajax渲染頁(yè)面的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: