• Vue 中的生命周期和钩子函数


    生命周期: 
    beforeCreate:el 和 data 并未初始化 (此方法不常用) 
    created:完成了 data 数据的初始化,el的初始化未完成。用来发送ajax

    beforeMount:(执行此方法时已经完成了 el 和 data 初始化 (已经赋予了对应的值)) 
    渲染DOM之前先确认下是否有要编译的根元素(有无el属性),有才继续确认是否具有模板属性template,如果有模版属性,则会用template的值替换掉HTML中的结构,template模版中只能有一个根元素(而且不能是文本); 
    mounted:(执行此方法时代表已经挂载结束了) 
    把编译好的数据挂载到DOM元素上,最后渲染成真实的DOM元素;真实DOM已经渲染完成,可以操作DOM了

    beforeUpdate:当页面依赖的数据更改之后触发(此时DOM结构还没有重新加载) 
    updated:DOM结构重新加载之后触发

    调用vm.$destroy()之后触发下面两个事件: 
    beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。(可在此处清除定时器,清除事件绑定) 
    destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。(意义不大)

    获取数据

    vue中给我们提供了一个created函数,在实例创建完成后会被立即调用。方法中的this指向的也是vue的实例

    let vm=new Vue({
         el:'#app',
         created(){
           //实例创建完成后会立即执行created方法
           this->vm这个实例
         },
         data:{
            msg:''
         }
    });

    Promise详解与axios的使用

    promise:解决回调问题,存在三个状态(成功、失败、等待) 
    Promise是一个类,new Promise时可传递一个函数,在new 的时候就调用传递进来的函数,而且会给函数默认传递两个参数(都是函数数据类型的)

    • 第一个参数为成功后要执行的方法
    • 第二个参数为失败后要执行的方法

    Promise的实例都有一个then方法:then方法中有两个参数(成功执行的函数,失败执行的函数)

    let a=new Promise((resolve,reject)=>{
            let a=1,b=3;
            if(a<b){
            //条件满足时我们让resolve执行并传入需要的参数
                resolve('条件满足');
                //resolve执行时then方法中的第一个参数(函数)就会执行
            }else{
            //条件不满足时我们让reject执行
                reject('条件不满足');
                //reject执行时,then方法中的第二个参数(函数)就会执行
            }
        })
    a.then((res)=>{
        //我们在promise中规定什么时候执行resolve,此方法就什么时候执行,res为执行resolve时传递的参数
        console.log(res);//条件满足 
    },(err)=>{
        //我们在promise中规定什么时候执行reject,此方法就什么时候执行,err为执行reject时传递的参数
        console.log(err);
    })

    axios就是基于Promise进行封装的:使用方法如下 
    先引入axios:

     <script src="axios.js"></script>
     <script>
     //使用axios:axios调用get方法后会返回Promise的一个实例,可以直接用then方法
        axios.get('json/1.json').then((res)=>{
    //axios成功后会执行的方法中的传递的参数为一个对象,如果要获取到需要的数据,需要用res.data;
           console.log(res.data);
        },(err)=>{
           console.log(err);
        })
     </script>
  • 相关阅读:
    大数据学习之路(持续更新中...)
    数据挖掘之初级
    用户画像
    机器挖掘之经典算法
    算法时间复杂度
    01-IOS-越狱指南
    gradle 内容学习参考
    python 获取文件路径相关
    第一行代码阅读笔记
    使用同步锁防止多进程的并发操作
  • 原文地址:https://www.cnblogs.com/webspace/p/8625172.html
Copyright © 2020-2023  润新知