下面我就為大家分享一篇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: 'all',
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: '#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) { // 如果查到数据
self.items = res.data;
}
})
}
},
created:function() {
this.getData();
console.log("success");
},
mounted:function() {
}
})以上是在vue.js中如何使用ajax渲染頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！
