Vue与服务端数据交互 [ axios ]
发布日期:2021-11-02 02:26:42 浏览次数:0 分类:技术文章

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>
上一篇:npm安装vue-cli时报错解决方法
下一篇:Vue的条件渲染和对象渲染