对照着jquery来学vue.js系列之ajax获取遍历数据

白俊遥
2016-09-11 21:35:34
前端
vue.js

从本文开始；后续将推出一系列文章；
旨在先让童鞋们用vue完成以前用jquery来实现的功能；
还没被安利过vue的好的先出门右转阅读上一篇文章；对照着jquery来学vue.js系列之安利篇
还不知道vue的基本用法的先直奔官网：vue官方网站

需要说明的是；这系列的文章并不是为了详细讲解官方的文档；
主要是写官网上并没有特别明确的说但新手会困惑的一些问题；
因此；基本用法这里就不再赘述了；
用上vue.js后；我们首先面对的问题就是如何跟后台进行数据交互呢？
千言万语都不如代码来的实在；
项目示例：http://git.oschina.net/shuaibai123/demo/tree/master

首先有一个data.php文件；返回如下这样的数据；

<?php

$data=array(
    'category'=>'vue入门学习',
    'article'=>array(
        array(
            'title'=>'对照着jquery来学vue.js系列之安利篇',
            'author'=>'李磊'
            ),
        array(
            'title'=>'对照着jquery来学vue.js系列之ajax获取数据',
            'author'=>'韩梅梅'
            )
        )
    );
echo json_encode($data);

要达到的效果是ajax获取数据并插入到dom中；
白俊遥博客
先来大家比较熟悉的jquery的操作方式；

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery 异步获取数据</title>
    <style type="text/css">
        div{
            margin: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
\<!-- jquery ajax获取数据 -->
<div class="jquery-ajax">
    
</div>
<!-- 引入jquery --> 
<script src="./js/jquery-1.10.2.min.js"></script>
<script>
    // 用jquery的方式实现
    $.get('data.php', function(data) {
        var str='<h1>'+data.category+'</h1>';
        $.each(data.article, function(index, val) {
            str +='<ul><li>'+val.title+'</li><li>'+val.author+'</li></ul>';
        });
        $('.jquery-ajax').html(str);
    },'json');
</script>
</body>
</html>

相信每一个用jquery拼接过html字符串的都懂其中的苦；
写的时候拼接起来那是一种会呼吸的痛；
后期维护改样式或者布局那更是痛彻心扉；
我只所以力推vue；看看下面vue来实现同样功能所写的代码就开始能体会到了；

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vue 异步获取数据</title>
    <style type="text/css">
        div{
            margin: 20px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!-- vue ajax获取数据 -->
<div class="vue-box">
    <h1>{{ posts.category }}</h1>
    <ul v-for="item in posts.article">
        <li>{{ item.title }}</li>
        <li>{{ item.author }}</li>
    </ul>
</div>
<!-- 引入veujs -->
<script src="./js/vue.js"></script>
<!-- 引入用于配合vuejs执行ajax操作的插件 -->
<script src="./js/vue-resource.min.js"></script>
<script>
// ajax 获取数据
var vm2=new Vue({
    el: '.vue-ajax',
    data: {
        posts:{}
    },
    // 页面加载的时候会自动执行ready
    ready: function(){
        // 等同于jquery的$.ajax
        this.$http.get('data.php').then(function(response){
                this.posts=response.data;
            })
    }
});
</script>
</body>
</html>

如果熟悉smaty或者其他框架的模板引擎的话；
看到js能在html页面中这样循环；那是相当的亲切的；
甚至vue.js比php模板引擎更简洁的连自定义标签都不需要；
直接写到html的标签中即可；

本文为白俊遥原创文章,转载无需和我联系,但请注明来自白俊遥博客https://baijunyao.com 欢迎捐赠赞赏加入组织创建QQ群及捐赠渠道