Vue与服务端数据交互 [axios]

Vue生命周期

每个Vue实例在被创建到销毁要经过一系列的过程，这整个过程称为Vue实例的生命周期 Vue在生命周期不同的阶段点会自动运行一些函数， 这些函数称为Vue生命周期的钩子(hook)函数

生命周期钩子函数:

beforeCreate

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

created

在实例创建完成后被立即调用

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用

mounted（最常用）

实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用

beforeUpdate

数据发生变化前调用

updated

数据发生变化后调用(数据自动刷新的原因)

destroyed

Vue实例销毁后调用

Vue与服务端数据交互

vue.js没有集成ajax功能，要使用ajax功能，使用vue官方推荐的axios.js库来做ajax的交互(axios内部集成了ajax数据交互的功能)

axios 使用

引入函数库

<script src="js/vue.min.js"></script>

<script src="js/axios.min.js"></script>

axios参数

<script> var vm = new Vue({ el: '#app', data: { ...... }, //vue实例与dom挂载好后，自动回调的方法 mounted: function () { axios({ url: '/url', //请求路径 method: 'get' //请求方式 //请求参数 data: { name: 'xxx', pwd: 'yyy' } }) //访问成功回调的方法 .then(function(dat){ console.log(dat) }) //访问失败回调的方法 .catch(function(e){ }) } }) </script>