vue简单介绍与使用，axios数据get请求

冯奎
2018-07-17 22:40:16
HTML
html javascript vue

Vue.js一套构建用户界面的渐进式框架，
通过尽可能简单的API实现响应的数据绑定和组合的视图组件，
Vue.js自身不是一个全能框架——只聚焦于视图层，
易易于学习，非常容易与其它库或已有项目整合。
同时与相关工具和支持库一起使用时，
Vue.js也能完美地驱动复杂的单页应用。

使用Vue.js只用简单的引入js文件就可以使用了

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<!-- vue绑定数据 -->
<div class="vue_box">
    <p>{{ name }}</p>
    <p>{{ url }}</p>
</div>

// 直接绑定数据
var vm=new Vue({
    el:'.vue_box',
    data:{
        name: '冯奎博客',
        url: 'fengkui.net'
    }
})

显示如下：
冯奎博客
这样我们就成功创建了第一个 Vue 应用！
看起来这跟渲染一个字符串模板非常类似，
但是 Vue 在背后做了大量工作。
现在数据和 DOM 已经被建立了关联，
所有东西都是响应式的。

相信大家都用过ajax请求数据，
each数据循环遍历，
然后将循环出来的数据插入到页面中,

首先我们新建一个data.php用于数据返回

<?php
$data=array(
    'category'=>'vue入门学习',
    'article'=>array(
        array(
            'title'=>'这是文章标题1。。。',
            'author'=>'冯奎1'
            ),
        array(
            'title'=>'这是文章标题2。。。',
            'author'=>'冯奎2'
            )
        )
    );
echo json_encode($data);

使用Jquery进行请求操作：

// 用jquery的方式实现
$.get('data.php', function(re) {
    var html='<h1>'+re.category+'</h1>';
    $.each(re.article, function(i, v) {
        html +='<ul><li>'+v.title+'</li><li>'+v.author+'</li></ul>';
    });
    $('.jquery_ajax').html(html);
},'json');

使用axios请求配和vue进行数据循环，
同样使用起来也是特别方便的

// ajax 获取数据
var vm2=new Vue({
    el: '.vue_ajax',
    data: {
        posts:{}
    },
    // 页面加载的时候会自动执行mounted
    mounted: function () {
        var _this = this
        axios.get('data.php')
        .then(function (res) {
            _this.posts = res.data;
            // console.log(res.data)
        }, function (error) {
            // console.log(error)
        })
      }
});

冯奎博客
index.html页面完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue和jquery异步获取数据对比</title>
    <style type="text/css">
    </style>
</head>
<body>
<!-- vue绑定数据 -->
<div class="vue_box">
    <p>{{ name }}</p>
    <p>{{ url }}</p>
</div>
<!-- vue ajax获取数据 -->
<div class="vue_ajax">
    <h1>{{ posts.category }}</h1>
    <ul v-for="item in posts.article">
        <li>{{ item.title }}</li>
        <li>{{ item.author }}</li>
    </ul>
</div>
<!-- jquery ajax获取数据 -->
<div class="jquery_ajax">  
</div>
<!-- 引入veujs -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<!-- 引入用于配合vuejs执行ajax操作的插件 -->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>
    // 直接绑定数据
    var vm=new Vue({
        el:'.vue_box',
        data:{
            name: '冯奎博客',
            url: 'fengkui.net'
        }
    })
    // ajax 获取数据
    var vm2=new Vue({
        el: '.vue_ajax',
        data: {
            posts:{}
        },
        // 页面加载的时候会自动执行mounted
        mounted: function () {
            var _this = this
            axios.get('data.php')
            .then(function (res) {
                _this.posts = res.data;
                // console.log(res.data)
            }, function (error) {
                // console.log(error)
            })
          }
    });
</script>
<!-- 引入jquery --> 
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    // 用jquery的方式实现
    $.get('data.php', function(re) {
        var html='<h1>'+re.category+'</h1>';
        $.each(re.article, function(i, v) {
            html +='<ul><li>'+v.title+'</li><li>'+v.author+'</li></ul>';
        });
        $('.jquery_ajax').html(html);
    },'json');
</script>
</body>
</html>

本文为冯奎原创文章，转载无需和我联系，但请注明来自冯奎博客fengkui.net