vue.js请求数据

三种方法，

1.是用jq的ajax请求之后将数据放到vue的data中，

2.是用vue-resource请求

3.axios

一、用jq ,ajax异步请求后，接收到返回的data参数并显示在前端 如下

1. 引入js,jQuery

2.html渲染表格用的指令 ==>

v-for ="data in datas "

 

.3 JS

        var goodsVue = new Vue({
            el: '#app',
            data: {
                datas : '',
            },
            methods: {
                nameSearch: function () {
                    var _self = this;
                    $.ajax({
                        type: 'GET',
                        url: '...',
                        success:function(data) {
                            _self.datas = data;
                        }
                    });
                }
            }
        })

ID	名称	年龄	简称
{{data.id}}	{{data.name}}	{{data.age }}	{{data.shortName}}

二、用vue-resource

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
var vm = new Vue(

{ 

el:"#list", 

data:{ datas : "", }, 

mounted: function() { 

this.$nextTick( ()=> {

 this.$http.jsonp('http://***.com').then(function(res) {

 console.log(res.data) this. datas = res.data; })

 }) },
</script>

三 、 axios

 

import axios from 'axios'



var vm = new Vue(

{ 

el:"#list", 

data:{ datas : "", }, 

mounted: function() { 

axios.get(url),then(resp=>{

//resp是接口返回的数据

})

 }})