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

从本文开始;后续将推出一系列文章;

旨在先让童鞋们用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的标签中即可;

白俊遥博客
请先登陆后发表评论
  • 最新评论
  • 总共10条评论
白俊遥博客

郑为满白俊遥博客测试

2016-10-08 17:57:25 回复

白俊遥博客

简简单单:<!-- vue ajax获取数据 -->的div少了一个class=vue-ajax

2016-09-19 16:22:28 回复

白俊遥博客
  • 云淡风晴 回复 简简单单:感谢反馈;已修正;
  • 2016-09-19 22:04:31 回复
白俊遥博客

简简单单:俊哥,百度的BAE怎么开启rewrite模式,怎么编辑app.cof。谢谢

2016-09-19 11:40:39 回复

白俊遥博客
  • 云淡风晴 回复 简简单单:你要的是这个么?https://cloud.baidu.com/doc/BAE/GUIGettingStarted.html#url.E4.B8.8Eregex_url
  • 2016-09-19 22:04:48 回复
白俊遥博客

城南旧事:sadsa

2016-09-19 09:58:00 回复

白俊遥博客

城南旧事:jjjj

2016-09-19 09:57:41 回复

白俊遥博客

      :555

2016-09-16 23:26:58 回复

白俊遥博客

Joker丶:这篇文章能整合TP翻页功能一起吗?

2016-09-13 11:31:31 回复

白俊遥博客
  • 云淡风晴 回复 Joker丶:分页么?下一篇可以写;
  • 2016-09-13 22:18:43 回复
白俊遥博客

い花逝般的青春つ:测试

2016-09-12 17:39:42 回复

白俊遥博客

い花逝般的青春つ:好

2016-09-12 17:38:43 回复

白俊遥博客

彭明东-沃德财富集团:白大大,你逛Vue的哪个社区?

2016-09-12 13:54:28 回复

白俊遥博客
  • 云淡风晴 回复 彭明东-沃德财富集团:掘金挺不错的:http://gold.xitu.io/tag/Vue.js
  • 2016-09-13 22:18:23 回复