1月13-Vue高级

今日内容: 1.Vue的生命周期 2.异步操作 3.自定义组件(重点) 4.ElementUI(饿了吗公司团队开发的前端框架) 5.Vue脚手架

1.Vue的生命周期
*人的生命周期
1.出生阶段—呱呱坠地
2.少儿阶段—幼儿园,小学中学
3.青年阶段—高中大学研究生博士
4.中年阶段—非常难
5.老年阶段----退休
6.驾鹤西去
特点: 人的生命周期阶段都是自动执行

Vue对象的生命周期: 指的从Vue对象开始创建,以及过程数据的显示,数据更新等等,以及Vue对象销毁特点: vue整个生命周期过程中,与生命周期相关的函数,都是自动执行的. 细节: 生命周期相关的函数,又称之钩子函数
生命周期函数有那些,生命周期函数有那些特点 1.beforeCreate:function(){} 特点: vue对象没有创建, 也不能获取data里面的数据 2.created:function(){} 特点: vue对象已经创建,可以获取数据, 但是vue对象没有挂载(vue对象还没有加载到浏览器) 3.beforeMount:function(){} 特点: vue对象已经创建,并且在浏览器中存在并且数据未挂载 4.mounted:function(){} 特点: vue对象已经创建,并且在浏览器中存在并且数据已经挂载了 5.beforeUpdate:function(){} 特点: vue对象已经创建,并且在浏览器中存在并且数据已经挂载了,在浏览器的内存中显示的未修改的 6.updateed:function(){} 特点: vue对象已经创建,并且在浏览器中存在并且数据已经挂载了,在浏览器的内存中显示的已经修改的 7.beforeDestroy 特点: vue对象在浏览器中存在,数据依然显示 8.destroyed 特点: vue对象在浏览器中不存在,数据依然显示与vue对象绑定的一切全部解绑. 总结: 1.vue生命周期相关的函数一共分为8个阶段,执行顺序从1到8 2. 自动执行的 beforeCreated() created() beforeMounte() mounted() 当data数据发生改变时才会执行 beforeUpdate() updated() 当vue对象销毁时,才会执行 beforeDestroy(),destroyed()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            {{msg}}
        </div>
        <script src="js/vue.js" type="text/javascript"></script>
        <script>
            var vm= new Vue({
                "el":"#app",
                "data":{
                    "msg":"hello",
                },
                //1. 第1个生命周期函数:
                //第一阶段: 指的vue对象还没有创建
                beforeCreate:function(){
                    //console.group("----beforeCreate的状态---");
                    //console.log("vue对象:"+this.$el);//vue对象没有创建
                    //console.log("数据:"+this.$data);//数据不能拿到
                },
                //2.第2个生命周期函数
                //如果 json的key是自定义的: 获取时不加$
                //如果json的可以是vue规范的: 获取时加$
                created:function(){
                    //console.group("----created的状态---");
                    //console.log("vue对象:"+this.$el);//vue对象现在已经创建,但不显示
                    //console.log("data:"+this.$data);// 可以获取数据,没有挂载
                    //console.log("msg:"+this.msg);//可以获取数据,没有挂载
                },
                //3.第3个生命周期函数
                //挂载前状态
                beforeMount:function(){
                    console.group("----beforeMount的状态---");
                    console.log("vue对象:"+this.$el);//vue对象现在已经创建,在浏览器里面有vue
                    console.log("data:"+this.$data);// 可以获取数据,没有挂载 
                    console.log("msg:"+this.msg);//可以获取数据,没有挂载
                },
                //4.第4个生命周期函数
                //挂载完毕:完全展示数据
                mounted:function(){
                    console.group("----mounted的状态---");
                    console.log("vue对象:"+this.$el);//vue对象现在已经创建
                    console.log("data:"+this.$data);// 可以获取数据,已经挂载 
                    console.log("msg:"+this.msg);//可以获取数据,已经挂载
                },
//第5个生命周期函数
                //  %c%s : 用来拼接字符串的表达式
                beforeUpdate:function(){
//                    console.group('beforeUpdate 更新前状态===============》');
//                    //获取标签之间的文本, v-html: 设置标签之间的文本
//                    let dom = document.getElementById("app").innerHTML;
//                    console.log(dom);// hello ?
//                    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", "message: " + this.msg);
                },
                //第6个生命周期函数
                updated:function(){
//                    console.group('Updated 更新后状态===============》');
//                    //获取标签之间的文本, v-html: 设置标签之间的文本
//                    let dom = document.getElementById("app").innerHTML;
//                    console.log(dom);//hello world ?
//                    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", "message: " + this.msg);
                    
                },
                //第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", "message: " + this.msg);
                },
                //第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", "message: " + this.msg);
                }
            });
            
            
            //銷毀對象: 与vue对象绑定一切都全部解绑
            vm.$destroy();
            
            //更新data中的数据: 因为vue对象已经销毁,所以赋值没有作用
            vm.msg = "hello world";
        
        </script>
    </body>
</html>

==============================================
2.异步操作

同步操作指的我们在向后台提交数据时,提交整个网页. client客户端(浏览器)----->server后台(java程序) 前台提交数据到后台? client----提交数据–>server 后台响应数据到前台? client<----响应数据–server 同步缺点: 当后台响应慢,用户看到的"留白" 同步优点: 向后台提交的次数少(因为需要等后台响应完以后), 后台的访问压力比较轻
异步操作指的我们在后台提交数据时,提交网页的一部分. client客户端(浏览器)----->server后台(java程序) 异步优点: 当后台响应慢,用户依然可以看到网页,不会有"留白" 异步缺点: 向后台提交数据的次数(异步提交的是网页一部分,不需要等后台响应) 后台访问压力大.
原始的ajax异步请求,实现一共分为四个步骤步骤一: 创建异步请求对象: xmlHttp 步骤二: 发送http请求(向后台提交数据):open(提交方式,后台地址,是否支持异步); 参数一:提交方式,比如: get 或者 post 参数二:后台地址,比如:http://www.xx.servelt; 参数三:是否支持异步请求,取值是true或者false 步骤三: 调用send()方法: 请求以及数据全部发送到后台步骤四 : 获取后台服务器响应的数据: xmlHttp.responseText: 接收后台响应的字符串数据 xmlHttp.responseXML: 接收后台响应的xml格式数据原始的ajax发送异步请求的缺点:代码量太大,重复代码解决的方式把上面的四个步骤封装成一个前端的js框架. 代表性的异步请求的框架 1.jquery.js: 很早之前的,不仅仅封装了异步请求,还有很多丰富的api 2.axios.js

=====================================================================
3.axios.js异步请求框架(掌握,代码必须会敲)
步骤一: 在html引入axios.js,也需要引入vue.js
步骤二: 在html网页里面指定vue的作用范围
步骤三: 在script标签里面创建vue对象
步骤四: 在methods选项里面,定义异步请求方法
注意: axios异步请求框架中,使用response(resp)来接收后台响应的数据
前台(response来接收后台响应的数据)<---------后台

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--2.指定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>
        <!--1.引入axios.js-->
        <script src="js/axios/axios-0.18.0.js"></script>
        <!--3.创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错误.    
                    //解决问题的方案(大家不用管,后期要学)
                    //tomcat服务器
                    test2(){
                        //当代码出现问题时,执行catch方法
                        //真正的后台地址
                        /**
                         * 问题1: 发送post请求报错,因为hbulider工具的问题
                         * 问题2: html网页在本地, server.json在服务器(两个不在一个地方)
                         *        存在跨域的问题.
                         * 问题3: html网页 和 server.json一起,为什么还没有显示?
                         *       html网页静态网页
                         *       server.json静态资源
                         *       html网页---->server.json不会响应
                         *       讲tomcat的那天演示一下.
                         */
                        var  url = "http://localhost:8080/tom/server"
                        axios.post(url).then(function(resp){
                            //响应对象接收后台的的数据: data属性是固定.
                            var u = resp.data;
                            //测试数据
                            console.log(u.id);
                        }).catch(
                            function(){
                                window.alert("代码有问题了!!!!");
                            }
                        );
                    },
                },
                
            });
        </script>
    </body>
</html>

标签： vue.js javascript 前端

本文转载自: https://blog.csdn.net/caozhisanguo/article/details/122474243
版权归原作者 小码哥的进阶 所有，如有侵权，请联系我们删除。

今日内容: 1.Vue的生命周期 2.异步操作 3.自定义组件(重点) 4.ElementUI(饿了吗公司团队开发的前端框架) 5.Vue脚手架

发表评论

“1月13-Vue高级”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航