關于上次說的用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>
<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) { // 如果查到數據
self.items = res.data;
}
})
}
},
created:function() {
this.getData();
console.log("success");
},
mounted:function() {
}
})
emmmmm，有個小問題得說下，AJAX是異步函數（關于異步可以去看我上一篇博客），它的回調函數執行環境是全局作用域，所以在getData中AJAX的this指向的是window。這有兩個解決方法，一個是像我這樣的用self把this存起來，還有一種就是用箭頭函數this綁定。
很多時候，我們往往對未知的事物感到恐懼，而這個恐懼往往阻礙我們邁出戰勝未知的那一步，這時候咬咬牙，邁出去就好了，困難永遠都只存在于腦子里。
以上這篇vue.js,ajax渲染頁面的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
