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.作者头像url
2.作者用户名
作者ID
帖子内容
发布时间
是否是精华
帖子ID
最后回复时间
回复数量
归属标签
帖子标题
是否置顶
浏览统计

数据接口如上.当然,如果是做全功能的论坛的话,这些数据都是有作用的.而在我的项目中,有很多是用不到的.我们来看下我需要那些.

<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>

如上代码所示,我们需要循环的内容包括

作者头像url
作者用户名
发布时间
帖子ID
帖子标题

没有问题,我们所需要的内容,接口全部都是有的.

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

如上,在需要的地方,我们只需要用 getJson(url,func) 这个函数就可以了.

引用封装好的代码

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

修改成这样之后,我们再来看下,看看能不能打印出来我们所需要的数据?如下图所示:

成功获取到数据

没有任何问题,我们依然获得了数据.我们在把这个回调的函数再封装一下,改成下面的代码

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

好,如果没有出错的话,绝对还是能够打印出来接口数据的.这样操作后,我们的代码就无比的简练,并且可阅读性大大增加了.而我们下面要做的事情,就是在 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>

vue知识点
循环数据 http://vuejs.org.cn/api/#v-for

JS代码部分

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

我们来看一下效果: