VUEJS實戰教程第一章,構建基礎並渲染出列表

從接口獲取數據

首先,無論怎麼樣,我們先要從接口拿到數據才能接着往下幹.我們通過jquery用ajax方法把數據拿過來再說.

如下代碼:

$(function(){
    $.ajax({
        type:'get',
        url:"http://cnodejs.org/api/v1/topics",
        dataType: 'json',
        success: function(data){
            if (data.success){
                console.log(data)
            }else{
                alert(JSON.stringify(data));
            }
        },
        error: function(data){
            alert(JSON.stringify(data));
        }
    });
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

代碼如上,我們看下瀏覽器控制檯,截圖如下:

如上圖所示,我們成功的拿到了數據.

分析數據

如上圖所示,數據裏面包含了如下內容

1. 作者 
   1.作者頭像url 
   2.作者用戶名
2. 作者ID
3. 帖子內容
4. 發佈時間
5. 是否是精華
6. 帖子ID
7. 最後回覆時間
8. 回覆數量
9. 歸屬標籤
10. 帖子標題
11. 是否置頂
12. 瀏覽統計

數據接口如上.當然,如果是做全功能的論壇的話,這些數據都是有作用的.而在我的項目中,有很多是用不到的.我們來看下我需要那些.

<li>
    <i class="user_ico">
        <img src="#頭像url" alt="用戶名">
        <span>用戶名</span>
    </i>
    <time class="time">發表於 5 天前</time>
    <a class="talk" href="content.html?鏈接ID">帖子標題</a>
</li>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

如上代碼所示,我們需要循環的內容包括

1. 作者頭像url
2. 作者用戶名
3. 發佈時間
4. 帖子ID
5. 帖子標題

沒有問題,我們所需要的內容,接口全部都是有的.

封裝 ajax 代碼

ajax 代碼雖然不長,但是我看着還是比較難受.因此,我用下面的代碼進行封裝

// ajax get json 方法
function getJson(url,func){
    $.ajax({
        type:'get',
        url:url,
        dataType: 'json',
        success: function(data){
            if (data.success){
                func(data);
            }else{
                alert("接口調用失敗");
            }
        },
        error: function(data){
            alert(JSON.stringify(data));
        }
    });
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

如上,在需要的地方,我們只需要用 getJson(url,func) 這個函數就可以了.

引用 封裝好的代碼

$(function(){
    var url = "http://cnodejs.org/api/v1/topics";
    getJson(url,function(data){
        console.log(data);
    });
});

• 1
• 2
• 3
• 4
• 5
• 6

修改成這樣之後,我們再來看下,看看能不能打印出來我們所需要的數據?如下圖所示:

沒有任何問題,我們依然獲得了數據.我們在把這個回調的函數再封裝一下,改成下面的代碼

$(function(){
    var url = "http://cnodejs.org/api/v1/topics";
    getJson(url,pushDom);
});
function pushDom(data){
    console.log(data);
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

好,如果沒有出錯的話,絕對還是能夠打印出來接口數據的.這樣操作後,我們的代碼就無比的簡練,並且可閱讀性大大增加了.而我們下面要做的事情,就是在 pushDom(data) 這個函數裏面去做就好了.

vue 渲染代碼

首先,我們需要在頁面中用 vue 的方法寫入我們要插入的數據.

html代碼部分

<li v-for="info in data">
    <i class="user_ico">
        <img src="{{ info.author.avatar_url }}" alt="{{ info.author.loginname }}">
        <span>{{ info.author.loginname }}</span>
    </i>
    <time class="time">{{ info.create_at }}</time>
    <a class="talk" href="content.html?{{ info.id }}">{{ info.title }}</a>
</li>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

vue知識點 
循環數據 http://vuejs.org.cn/api/#v-for

JS代碼部分

function pushDom(data){
    var vm = new Vue({
        el: '.list',
        data: data
    });
}

• 1
• 2
• 3
• 4
• 5
• 6

我們來看一下效果: