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>