Vue框架相关知识day02

一、VueJS生命周期

1.1 每个 Vue 实例在被创建之前都要经过一系列的初始化过程

        vue在生命周期中有这些状态，created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue 在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。

1.2 vue对象初始化过程中会执行到钩子的内容： 

        beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象 

        created ：数据已经绑定到了对象实例，但是还没有挂载对象 

        

        beforeMount：模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创 建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点 

        

        mounted：将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作，当我们的data发生改变时，会调用beforeUpdate和updated方法 

        beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变 

        updated：dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到 dom上面，完成更新 

        beforeDestroy,destroed：实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动

二、VueJS ajax

2.1 vue-resource：

        vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以。             vue-resource的github: https://github.com/pagekit/vue-resource 

2.2 axios 

        Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中                axios的github:https://github.com/axios/axios 

2.2.1 引入axios 

       首先就是引入axios,如果你使用es6，只需要安装axios模块之后：

           import axios from 'axios'; 

           //安装方法 

           npm install axios 

        当然也可以用script引入：

        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.2.2 get请求

         

 

2.2.3 post请求

         

2.2.4 为方便起见，为所有支持的请求方法提供了别名：

            axios.request(config)

            axios.get(url[, config]) 

            axios.delete(url[, config]) 

            axios.head(url[, config]) 

            axios.post(url[, data[, config]]) 

            axios.put(url[, data[, config]]) 

            axios.patch(url[, data[, config]])