Vue入门（二）

Vue入门（二）

Vue的生命周期(理解)

Vue对象的生命周期：

• 指的是从Vue对象开始创建，以及过程数据的显示，数据更新等等，以及Vue对象销毁。
• 特点：Vue整个生命周期过程中，与生命周期相关的函数，都是自动执行的。
• 细节：生命周期相关的函数，又称之为钩子函数

生命周期函数有哪些，有哪些特点？

1.beforeCreate:function() {}

//1.第1个生命周期函数
//第一阶段：指的vue对象还没有创建
beforeCreate:function() {
    console.group("---beforeCreate的状态---");
    console.log("vue对象:"+this.$el);//打印vue对象
    console.log("数据:"+this.$data);
},

特点：vue对象没有创建，获取不到数据

2.created:function() {}

//2.第2个生命周期函数
//如果json的key是自定义的：获取时不加$
//如果json的key是vue规范的：获取时加$
created:function() {
    console.group("---created的状态---");
    console.log("vue对象:"+this.$el);//打印vue对象
    console.log("数据:"+this.$data);
    console.log("msg:"+this.msg);
},

特点：vue对象已经创建，可以获取数据，但是vue对象没有挂载（vue对象还没有加载到浏览器）

3.beforeMount:function() {}

//3.第3个生命周期函数
//挂载前状态
beforeMount:function() {
    console.group("---beforeMount的状态---");
    console.log("vue对象:"+this.$el);//打印vue对象
    console.log("数据:"+this.$data);//可以获取数据，没有挂载
    console.log("msg:"+this.msg);//可以获取数据，没有挂载
},

特点：vue对象已经创建，并且在浏览器中存在，并且数据未挂载

4.mounted:function(){}

//4.第4个生命周期函数
//挂载状态
mounted:function() {
    console.group("---mounted的状态---");
    console.log("vue对象:"+this.$el);//打印vue对象
    console.log("数据:"+this.$data);//可以获取数据，已经挂载
    console.log("msg:"+this.msg);//可以获取数据，已经挂载
},

特点：vue对象已经创建，并且在浏览器中存在，并且数据已经挂载了

5.beforeUpdate:function() {}

//5.第5个生命周期函数
// %c%s:用来拼接字符串的表达式
beforeUpdate:function() {
    console.group("---beforeUpdate的状态---");
    //获取标签之间的文本，v-html:设置标签之间的文本
    let dom = document.getElementById("app").innerHTML;
    console.log(dom);
    console.log("%c%s","color:red","el:"+this.$el);
    console.log(this.$el);
    console.log("%c%s","color:red","data:"+this.$data);
    console.log("%c%s","color:red","msg:"+this.msg);
},

特点：vue对象已经创建，并且在浏览器中存在，并且数据已经挂载了，在浏览器的内存中显示未修改的

6.updated:function() {}

//6.第6个生命周期函数
updated:function() {
    console.group("---updated的状态---");
    console.log(dom);
    console.log("%c%s","color:red","el:"+this.$el);
    console.log(this.$el);
    console.log("%c%s","color:red","data:"+this.$data);
    console.log("%c%s","color:red","msg:"+this.msg);
},

特点：vue对象已经创建，并且在浏览器中存在，并且数据已经挂载了，在浏览器的内存中显示已经修改的

7.beforeDestroy:function() {}

//7.第7个生命周期函数
beforeDestroy:function() {
    console.group("---beforeDestroy的状态---");
    console.log("%c%s","color:red","el:"+this.$el);
    console.log(this.$el);
    console.log("%c%s","color:red","data:"+this.$data);
    console.log("%c%s","color:red","msg:"+this.msg);
},

特点：vue对象在浏览器中存在，数据依然显示

8.destroyed:function() {}

//8.第8个生命周期函数
destroyed:function() {
console.group("---destroyed的状态---");
console.log("%c%s","color:red","el:"+this.$el);
console.log(this.$el);
console.log("%c%s","color:red","data:"+this.$data);
console.log("%c%s","color:red","msg:"+this.msg);
}
});

特点：vue对象在浏览器中存在，数据依然显示，与vue对象绑定的一切全部解绑.

总结：

• vue生命周期相关的函数一共分为8个阶段，执行顺序从1到8

• 自动执行的

  beforeCreated()  created()  beforeMounte()  mounted()
  

  当数据发生改变时才会执行的

  beforeUpdate()  updated()
  

  对象发生销毁时才会执行的

  beforeDestroy()  destroyed()
  

异步操作

同步操作

​ 指的时我们在向后台提交数据时，提交整个网页。

  client客户端（浏览器）----->server后台（java程序）

​ 前台提交数据到后台？

  client----提交数据---->server

​ 后台响应数据到前台？

  client<----响应数据----server

• 同步缺点：

​ 当后台响应慢，用户看到的”留白“

• 同步优点：

​ 向后台提交的次数少（因为需要等后台响应完以后），后台的访问压力比较轻

异步操作

​ 指的时我们在向后台提交数据时，提交网页的一部分。

	client客户端（浏览器）----->server后台（java程序）

• 异步优点：

​ 当后台响应慢，用户依然可以看到网页，不会有”留白“

• 异步缺点：

​ 向后台提交数据的次数多（异步提交的是网页的一部分，不需要后台的响应），后台的访问压力大。

• 原始的ajax异步请求，实现一共分为四个步骤

  步骤一：创建异步请求对象：xmlHttp

  步骤二：发送http请求（向后台提交数据）：open(提交方式，后台地址，是否支持异步)；

  ​ 参数一：提交方式，比如：get或者post

  ​ 参数二：后台地址，比如：http://www.xx.servlet；

  ​ 参数三：是否支持异步请求，取值是true或者false

  步骤三：调用send()方法：请求以及数据全部发送到后台

  步骤四：获取后台服务器响应的数据：response对象

  xmlHttp.responseText：接收后台响应的字符串数据
  
  xmlHttp.responseXML：接收后台响应的xml格式数据
  

  原始的ajax发送异步请求的缺点：代码量太大，重复代码

  解决的方式把上面的四个步骤封装成一个前端的js框架

  ​ 代表性的异步请求的框架

  1.jquery.js：很早之前，不仅仅封装了异步请求，还有很多丰富的api
  
  2.axios.js
  

axios使用

axios.js异步请求框架（掌握，代码必须会敲）

步骤一：在html引入axios.js，也需要引入vue.js

步骤二：在html网页里面指定vue的作用范围

步骤三：在script标签里面创建vue对象

步骤四：在methods选项里面，定义异步请求方法

注意：axios异步请求框架中，使用response（resp）来接收后台响应的数据

前台（response来接收后台响应的数据）<-------------后台

引入axios

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

基本格式

axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}.then(function(response){},function(err){})

{"id":"001","name":"jack"} //server.json

<!--3.指定vue的作用范围-->
<div id="app">

    <!--定义一个button标签，点击事件发送异步请求-->
    <button @click="test1()">发送get的异步请求</button>

    <!--定义一个button标签，点击事件发送异步请求-->
    <button @click="test2()">发送post的异步请求</button>

</div>
<!--1.引入vue.js-->
<script src="js/vue.js"></script>
<!--2.引入axios.js-->
<script src="js/axios/axios-0.18.0.js"></script>
<!--4.创建vue对象，在methods定义一部去请求方法-->
<script>
    new Vue({
        "el":"#app",
        "data":{
            "msg":"hello",
        },
        "methods":{
            //1.定义异步请求方法
            test1(){
                //2.发送异步请求：get
                //1.get方法：指定向后台发送的请求地址，参数是一个string
                //2.then方法：接收后台响应的数据，参数是一个函数
                //3.catch方法：处理前台和后台代码的异常
                //细节：axios名称，get名称，then名称，catch名称都是固定的
                //定义一个json文件：模拟后台地址
                //get方法的参数：json文件的地址
                var url = "server.json";
                axios.get(url).then(
                    function(resp){
                        //用来接收后台响应的数据
                        var user = resp.data;    
                        //测试数据
                        console.log(user.id+","+user.name);
                    }
                ).catch();
            },
            //2.定义异步请求方法test2
            //问题：因为hublider工具不能模拟服务器，接收post请求
            //     报500错误
            test2(){
                axios.post("server.json").then(
                    function(resp){
                        //响应对象接收后台的数据：data属性是固定的
                        var u = resp.data;    
                        //测试数据
                        console.log(u.id);
                    }
                ).catch(
                    //代码出现问题时，执行catch方法
                    function(){
                        window.alert("代码出问题了!");
                    }
                );
            },
        }
    })
</script>