Vue-Axios异步通信

最新推荐文章于 2024-12-04 07:15:00 发布

好运haoyun

最新推荐文章于 2024-12-04 07:15:00 发布

阅读量808

点赞数 2

分类专栏： Vue 文章标签： vue java es6 html javascript

本文链接：https://blog.csdn.net/qq_43439968/article/details/108425709

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了Vue中如何使用Axios进行异步通信，Vue推荐使用Axios而非jQuery，因为Vue遵循Soc原则。Axios是一个支持Promise API的开源库，适用于浏览器和Node.js，用于处理Ajax异步请求。此外，还简述了Vue的生命周期及其钩子函数，说明了在Vue实例的不同阶段可以注册钩子函数以控制应用的行为。

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

Axios异步通信

网络通信可以使用jQuery，但是vue是一个视图层框架，作者比较遵守Soc原则，所以vue不包含Ajax异步通信功能，为了解决通信功能，就开发了vue-resource插件，但是这个插件停止了更新，就推荐使用了这个框架，少用jQuery，因为操作Dom太频繁了

Axios是一个开源的可以使用在浏览器端和NodeJS的异步通信框架，主要作用是实现Ajax异步通信

从浏览器创建异步请求XML Http Requests
从Node.js创建http请求
支持PromiseAPI
拦截请求和响应
转换请求数据和响应数据
取消请求
自动住那换JSON数据
客户端支持防御XSRF（跨站请求伪造）

Vue的生命周期：钩子函数

Vue的实例有一个完整的生命周期，创建、初始化数据、编译模板、挂在Dom、渲染、更新、渲染、卸载等一系列过程

就是从Vue实例从创建到销毁的过程就是Vue的生命周期

Vue的生命周期中提供了一系列的事件，让我们在事件触发时注册JS方法，可以让我们自己注册的JS方法控制整个大局，这些事件响应方法中this直接指向的是Vue的实例

举的一个列子是，当运行Vue对象时，初始化到渲染中间是有一大段空闲的，在这些间隙中挂载钩子，来执行一些命令

如何使用
GitHub
在线cdn
要使用ES6规范，ES5写不了这个代码、

<body>
    <div id="vue">

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#vue',
 
            mounted(){
                axios.get("data.json").then(Response=>(console.log(Response.data)));
            }
        });
    </script>
</body>

{
  "name": "haoyun",
  "url": "https://www.baidu.com",
  "page": 1,
  "address": {
    "street": "东咀",
    "city": "珠海",
    "country": "中国"
  }
}

<body>
    <div id="vue" v-clock>
        {{info.address.street}}
        {{info.name}}
        <a v-bind:href="info.url">百度</a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#vue',
            data(){
                return{
                    info:{
                        name:null,
                        url:null,
                        page:null,
                        address:{
                            street:null,
                            city:null,
                            country:null
                        }
                    }
                }
            },
            /*钩子函数*/
            mounted(){
                axios.get("data.json").then(Response=>(this.info=Response.data));
            }
        });
    </script>
</body>