Vue数据请求方式

最新推荐文章于 2023-05-09 11:40:21 发布

靠谱的小董

最新推荐文章于 2023-05-09 11:40:21 发布

阅读量171

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_43495846/article/details/105128816

版权

本文介绍了在Vue中进行数据请求的三种方式：vue-resource、fetch和axios。尽管vue-resource自Vue 2.0后不再被维护，但依然提及了其get和jsonp请求的使用。fetch作为更规范的API，尽管存在兼容性问题，但通过polyfill可以解决。而axios作为现代的HTTP库，提供了便捷的get和post请求以及json处理。

摘要由CSDN通过智能技术生成

vue-resource请求

从vue的2.0开始，作者说：vue-resource不再维护了

resource—get请求
HTML：

	<div id="app">
        <ul>
            <li v-for="book in books">{
   {
   book.title}}</li>
        </ul>
        <button @click='get'>发送http请求</button>
    </div>

JavaScript：

	<script src="./base/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
    <script>
        //引入Vue-resourse之后，可以在Vue实例或者组件上绑定一个$http的一个属性
        new Vue({
   
            el: "#app",
            data: {
   
                books:[]
            },
            methods:{
   
                get(){
   
                    this.$http.get("./json/temp.json").then(res=>{
   
                        this.books = res.data.books
                    })
                }
            }
        })
    </script>

resource—jsonp请求
HTML：

	<div id="app">
        <input type="text" v-model="good" @keyup.enter='jsonp'>
        <button @click='jsonp'>请求jsonp数据</button>
        <ul>
            <li v-for='item in result'>{
   {
   item[0]