黑马eesy_15 Vue:03.生命周期与ajax异步请求&&04.vue案例

Posted marlonkang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了黑马eesy_15 Vue:03.生命周期与ajax异步请求&&04.vue案例相关的知识,希望对你有一定的参考价值。

黑马eesy_15 Vue:02.常用语法

 

 

vue的生命周期与ajax异步请求


1、Vue的快速入门
2、Vue的语法
  插值表达式
  事件的绑定
  数据的显示
  逻辑判断和循环输出
3、Vue的生命周期
  8个生命周期的执行点
    4个基本的
    4个特殊的
4、axios的ajax异步请求
  它和jquery的ajax比较相似

5、综合案例
    实现用户的查询列表和更新操作
        前端:Vue
        后端:ssm


3.VueJS生命周期

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

技术图片

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

那么,在这些vue钩子中,vue实例到底执行了那些操作,我们先看下面执行的例子 :

 使用Firefox浏览器按F12切换开发者模式查看 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>vuejs的生命周期</title>
        <script src="js/vuejs-2.5.16.js"></script>
    </head>

    <body>
        <div id="app">
            message  <!--vue的插值表达式-->
        </div>
    </body>
    <script>
        // new一个Vue对象名称叫做vm
        var vm = new Vue(
            el: "#app",
            data: 
                message: hello world
            ,
            beforeCreate: function() 
                console.log(this);
                showData(创建vue实例前, this);
            ,
            created: function() 
                showData(创建vue实例后, this);
            ,
            beforeMount: function() 
                showData(挂载到dom前, this);
            ,
            mounted: function() 
                showData(挂载到dom后, this);
            ,
            beforeUpdate: function() 
                showData(数据变化更新前, this);
            ,
            updated: function() 
                showData(数据变化更新后, this);
            ,
            beforeDestroy: function() 
                vm.test = "2333";
                showData(vue实例销毁前, this);
            ,
            destroyed: function() 
                showData(vue实例销毁后, this);
            
        );

        function realDom() 
            console.log(真实dom结构: + document.getElementById(app).innerHTML);
        

        function showData(process, obj) 
            console.log(process);
            console.log(data 数据: + obj.message)
            console.log(挂载的对象:)
            console.log(obj.$el)
            realDom();
            console.log(------------------)
            console.log(------------------)
        
        //vm.message = "good...";
        //vm.$destroy();
    </script>

</html>

 

vue对象初始化过程中,会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容

  • 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发生改变时,会调用beforeUpdateupdated 
  1. beforeUpdate :数据更新到dom之前,我们可以看到$el对象已经修改,但是我们页面上dom的数据还没有发生改变。
  2. updated: dom结构会通过虚拟dom的原则,找到需要更新页面dom结构的最小路径,将改变更新到dom上面,完成更新。
  • beforeDestroy,destroed :实例的销毁,vue实例还是存在的,只是解绑了事件的监听还有watcher对象数据与view的绑定,即数据驱动。

 

 


17vue的ajax以及案例的介绍

4.1 vue-resource 

vue更新2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,在这里大家了解一下vue-resource就可以。 

4.2 axios 

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

 

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

import axios from ‘axios‘;
//安装方法
npm install axios
//或
bower install axios

当然也可以用script引入

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

 

 

 4.2.2 get请求

//通过给定的ID来发送请求,ES6语法
axios.get(‘/user?ID=12345‘)
.then(function(response)
console.log(response);
)
.catch(function(err)
console.log(err);
);

 

//以上请求也可以通过这种方式来发送
axios.get(‘/user‘,
params:
ID:12345

)
.then(function(response)
console.log(response);
)
.catch(function(err)
console.log(err);
);

 

4.2.3 post请求

axios.post(‘/user‘,
firstName:‘Fred‘,
lastName:‘Flintstone‘
)
.then(function(res)
console.log(res);
)
.catch(function(err)
console.log(err);
);

为方便起见,为所有支持的请求方法提供了别名
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]])


 

 

 

 

 

==============================

参考资料:

 记录火狐浏览器的一些开发使用总结

end

以上是关于黑马eesy_15 Vue:03.生命周期与ajax异步请求&&04.vue案例的主要内容,如果未能解决你的问题,请参考以下文章

黑马eesy_15 Vue:vue语法和生命周期与ajax异步请求

阶段2 JavaWeb+黑马旅游网_15-Maven基础_第4节 maven生命周期和概念模型图_08maven生命周期

阶段2 JavaWeb+黑马旅游网_15-Maven基础_第4节 maven生命周期和概念模型图_09maven概念模型图

Vue_03 vue的生命周期组件插槽Slot路由Router

Day19_06_Vue教程之Vue实例的生命周期

Day19_06_Vue教程之Vue实例的生命周期