首頁 >web前端 >js教程 >在vue.js中如何使用ajax渲染頁面

在vue.js中如何使用ajax渲染頁面

亚连原創: 2018-06-06 11:17:142899瀏覽

下面我就為大家分享一篇vue.js,ajax渲染頁面的實例，具有很好的參考價值，希望對大家有幫助。

關於上次說的用vue.js，zepto，node.js,webpack等技術重構CNode。這是一個比較入門的項目，一般你學完vue就可以上手了，CNode網站有公開的API所以你可以獲取這個網站的所有數據接口，然後渲染到頁面上，用CSS等加工一下就可以了。起初，我一直覺得好難好難好難，雖然說不出難在哪裡，就覺得好難好難好難。讓我細說，不就是用ajax取得數據，然後傳到元件上渲染嗎，再模仿寫樣式不就好了嗎。是不難啊，可是為什麼我心裡天然覺得很難呢？

CNode是給了我們資料接口，ajax也就那麼幾個方法。後來我仔細想想，發現了內心恐懼的地方是ajax。是啊，給了我數據接口，我能獲取到數據，但是你給了我什麼啊？在沒用之前，對於ajax獲取到的數據我是未知的。人總是對自己未知的東西感到恐懼！就像同學說的，ajax我之前以為很難的啊，後來我用起來感覺也沒什麼啊。我想，初學者對於ajax的困惑大多在於對他所獲得的資料的未知性的恐懼。

既然恐懼它的未知性，那我們不妨好好看看這個「數據」！這裡我用的是zepto的Ajax方法（現學現用嘛）。

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; 
   } 
  })

然後在Console輸入topics

ajax獲取到的是Json格式，如上圖所示，我們可以看到獲取到了20個Json類型的“對象”，每個對像有那麼多個屬性。例如我要獲取第一個物件的title

現在你應該看穿了ajax獲取到的那個數據了吧，感覺這一小步邁出後，整個人都輕鬆了。

趁熱打鐵，簡單的用vue渲染一個頁面。

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>

#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() { 
 
 } 
})

emmmmm，有個小問題得說下，AJAX是非同步函數（關於非同步可以去看我上一篇部落格），它的回呼函數執行環境是全域作用域，所以在getData中AJAX的this指向的是window。這有兩個解決方法，一個是像我這樣的用self把this存起來，還有一種就是用箭頭函數this綁定。

很多時候，我們往往對未知的事物感到恐懼，而這個恐懼往往阻礙我們邁出戰勝未知的那一步，這時候咬咬牙，邁出就好了，困難永遠都只存在於腦子裡。

上面是我整理給大家的，希望今後對大家有幫助。

透過vuejs如何實作資料驅動視圖原則

在Vue中如何使用父元件呼叫子元件事件

在vue中如何實作密碼顯示隱藏切換功能

以上是在vue.js中如何使用ajax渲染頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：怎樣利用Vue.js內.native修飾符下一篇：怎樣利用Vue.js內.native修飾符

看更多