關(guān)于上次說的用vue.js,zepto,node.js,webpack等技術(shù)重構(gòu)CNode。這是一個比較入門的項(xiàng)目,一般你學(xué)完vue就可以上手了,CNode網(wǎng)站有公開的API所以你可以獲取這個網(wǎng)站的所有數(shù)據(jù)接口,然后渲染到頁面上,用CSS等加工一下就可以了。起初,我一直感覺好難好難好難,雖然說不出難在哪里,就感覺好難好難好難。讓我細(xì)說,不就是用ajax獲取數(shù)據(jù),然后傳到組件上渲染嗎,再模仿著寫樣式不就好了嗎。是不難啊,可是為什么我心里天然覺得很難呢?
成都創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營銷推廣、網(wǎng)站重做改版、新會網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、成都商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù),價格優(yōu)惠性價比高,為新會等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
CNode是給了我們數(shù)據(jù)接口,ajax也就那么幾個方法。后來我仔細(xì)想想,發(fā)現(xiàn)了內(nèi)心恐懼的地方是ajax。是啊,給了我數(shù)據(jù)接口,我能獲取到數(shù)據(jù),但是你給了我什么???在沒用之前,對于ajax獲取到的數(shù)據(jù)我是未知的。人總對自己未知的東西感到恐懼!就像同學(xué)說的,ajax我之前以為很難的啊,后來我用起來感覺也沒什么啊。我想,大部分初學(xué)者對于ajax的困惑往往就在于對他獲取到的數(shù)據(jù)的未知性的恐懼。
既然恐懼它的未知性,那么我們不妨好好看看這個“數(shù)據(jù)”!這里我用的是zepto的Ajax方法(現(xiàn)學(xué)現(xiàn)用嘛)。
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) { // 如果查到數(shù)據(jù) topics = res.data; } })
然后在Console輸入topics
ajax獲取到的是Json格式,如上圖所示,我們可以看到獲取到了20個Json類型的“對象”,每個對象有那么多個屬性。比如我要獲取第一個對象的title
現(xiàn)在你應(yīng)該看穿了ajax獲取到的那個數(shù)據(jù)了吧,感覺這一小步邁出去后,整個人都輕松了。
趁熱打鐵,簡單的用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) { // 如果查到數(shù)據(jù) self.items = res.data; } }) } }, created:function() { this.getData(); console.log("success"); }, mounted:function() { } })
emmmmm,有個小問題得說下,AJAX是異步函數(shù)(關(guān)于異步可以去看我上一篇博客),它的回調(diào)函數(shù)執(zhí)行環(huán)境是全局作用域,所以在getData中AJAX的this指向的是window。這有兩個解決方法,一個是像我這樣的用self把this存起來,還有一種就是用箭頭函數(shù)this綁定。
很多時候,我們往往對未知的事物感到恐懼,而這個恐懼往往阻礙我們邁出戰(zhàn)勝未知的那一步,這時候咬咬牙,邁出去就好了,困難永遠(yuǎn)都只存在于腦子里。
以上這篇vue.js,ajax渲染頁面的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站欄目:vue.js,ajax渲染頁面的實(shí)例
鏈接分享:http://muchs.cn/article18/ipjhgp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、響應(yīng)式網(wǎng)站、微信小程序、移動網(wǎng)站建設(shè)、虛擬主機(jī)、自適應(yīng)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)