vue请求数据

vue-resource:

1. 需要安装vue-resource模块，注意加上 --save

npm install vue-resource --save / cnpm install vue-resource --save

2. main.js引入 vue-resource

import VueResource from 'vue-resource';

3. main.js

Vue.use(VueResource);

4. 在组件里面直接使用

this.$http.get(地址).then(function(res){

},function(err){

})

实例：

<template>

  <div>

    <h3>home组件</h3>

    <button @click="addList()">加载</button>

    <ul>

      <li v-for="item in list">{{item.title}}</li>

    </ul>

  </div>

</template>

<script>

    export default {

        name: "home",

        data(){

            return{

                list:[]

            }

        },

        methods:{

            addList(){

                //请求数据

                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';

                this.$http.get(api).then((res)=>{

                    this.list = res.body.result;

                },(err)=>{

                    console.log(err)

                })

            }

        },

        mounted() {  //请求数据，操作dom可在这进行

            console.log('模板编译完成4')

            this.addList();

        },

        beforeCreate() {

            console.log('实例刚刚被创建1')

        },

        created() {

            console.log('实例已经创建完成2')

        },

        beforeMount() {

            console.log('模板编译之前3')

        },

        beforeUpdate() {

            console.log('数据更新之前')

        },

        updated() {

            console.log('数据更新完毕')

        },

        beforeDestroy() {//页面销毁前报错数据

            console.log('实例销毁之前')

        },

        destroyed() {

            console.log('实例销毁完成')

        }

    }

</script>

<style scoped>

</style>

vue-resource 提供了 7 种请求 API(REST 风格)：
get(url, [options])

head(url, [options])

delete(url, [options])

jsonp(url, [options])

post(url, [body], [options])

put(url, [body], [options])

patch(url, [body], [options])

axios：

1.安装

cnpm install axios --save

2.哪里使用那里引入

<template>

  <div>

    <h3>home组件</h3>

    <button @click="addList()">加载</button>

    <ul>

      <li v-for="item in list">{{item.title}}</li>

    </ul>

  </div>

</template>

<script>

    import axios from 'axios'

    export default {

        name: "home",

        data(){

            return{

                list:[]

            }

        },

        methods:{

            addList(){

                //请求数据

                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';

                axios.get(api).then((res)=>{

                    this.list = res.data.result;

                }).catch((err)=>{

                    console.log(err)

                })

            }

        },

        mounted() {  //请求数据，操作dom可在这进行

            console.log('模板编译完成4')

            this.addList();

        },

    }

</script>

<style scoped>

</style>

fetch：

https://github.com/camsong/fetch-jsonp

1.安装

cnpm install fetch-jsonp --save

 addList(){

                var $that = this

                //请求数据

                // //注意： 第一个.then 中获取到的不是最终数据，而是一个中间的数据流对象；

                // 注意： 第一个  .then 中获取到的数据， 是一个 Response 类型对象；

                // 注意： 第二个 .then 中，获取到的才是真正的 数据；

                var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';

                fetchJsonp(api,{

                    method:'get'

                }).then(function (res) {

                    res.json().then((json)=>{

                        console.log(json)

                        $that.list = json.result;

                    })

                }).catch(function (err) {

                    console.log('err',err)

                })

            }

巴特西

vue请求数据

vue-resource:

axios：

fetch：

最新文章

热门文章