生命周期

new vue()

• init Events & Lifecycle
• 初始化 事件 生命周期

beforeCreate

• init injections & reactivity
• 創(chuàng)建之前 注射與反應(yīng)性 還沒有data數(shù)據(jù)

created

• 創(chuàng)建 這事有data

從creatd()鉤子函數(shù)到beforeMount鉤子函數(shù)之間稱之為編譯模板階段愕难，此時模板編譯成功，生成了一個編譯好的模板字符串惫霸，在內(nèi)存中將這個模板字符串渲染為內(nèi)存中的DOM猫缭，但是還在內(nèi)存中，沒有掛載到頁面中壹店。

beforeMount

• 可以在渲染前最后一次獲取到vue中的數(shù)據(jù)猜丹，

mounted

• 鉤子函數(shù)發(fā)生在此階段，此時的vue實例已經(jīng)被渲染到頁面上硅卢，用戶可以看到vue實例的頁面射窒，我們可以操作DOM等

beforeUpdate

• 更改之前

updated

• 更改后

當用戶關(guān)閉整個頁面或者執(zhí)行了某些$destroy時，就會從運行階段進入銷毀階段（主要的一大特點是運行了beforeDestroy鉤子函數(shù)

beforeDestroy

• 銷毀前執(zhí)行的鉤子函數(shù)将塑，可以繼續(xù)使用vue實例中的數(shù)據(jù)脉顿，如data methods filters，derictives等等弊予。

destroyed

• vue實例中的數(shù)據(jù)不可用了责鳍。

created : 在綁定元素的屬性或事件監(jiān)聽器被應(yīng)用之前調(diào)用嘀略。
beforeMount : 指令第一次綁定到元素并且在掛載父組件之前調(diào)用讼育。。
mounted : 在綁定元素的父組件被掛載后調(diào)用。蹲缠。
beforeUpdate: 在更新包含組件的 VNode 之前調(diào)用渔肩。撑帖。
updated: 在包含組件的 VNode 及其子組件的 VNode 更新后調(diào)用。
beforeUnmount: 當指令與在綁定元素父組件卸載之前時，只調(diào)用一次。
unmounted: 當指令與元素解除綁定且父組件已卸載時蛆橡，只調(diào)用一次屁药。

基本數(shù)據(jù)類型 數(shù)組/對象(復制/拷貝)

• 基本的數(shù)據(jù)類型：String, Number, boolean, Null, Undefined,Symbol(ES6新增)
• 對象數(shù)據(jù)類型(也稱為引用數(shù)據(jù)類型)：Array,Object,Function

    /* 
        深層(復制/拷貝)對象
        利用JSON對數(shù)據(jù)的轉(zhuǎn)換實現(xiàn)
    */
    var a={a:1,b:2};
    var b = JSON.parse( JSON.stringify(a));
    b.a=2;
    console.log(a,b)

    /*
        數(shù)組(復制/拷貝)
     如何實現(xiàn)深度拷貝(克隆)
     拷貝的數(shù)據(jù)里有對象/數(shù)組
     拷貝的數(shù)據(jù)里不能有對象/數(shù)組,即使有對象/數(shù)組可以繼續(xù)遍歷對象缭嫡、數(shù)組拿到里邊每一項值笤成，一直拿到是基本數(shù)據(jù)類型培遵，然后再去復制，就是深度拷貝。
      */
  
      //知識點儲備
     /*
         如何判斷數(shù)據(jù)類型:arr-Array null -Null
         1.typeof返回的數(shù)據(jù)類型有:String箭启，Number,Boolean,Undefined,Object,Function。
         2.Object.prototype.toString.call(obj)珍策。
     */
     
         let result = 'abcd';
         result = null;
         result = [1,3];
         console.log(Object.prototype.toString.call(result).slice(8,-1)); //[object Array]，sclice截取字符串后:Array(拿到分類)。
         //console.log(typeof Object.prototype.toString.call(result));  //string
     
     
         //for in 循環(huán)對象(屬性名)讯壶、數(shù)組(下標)，推薦在循環(huán)對象屬性的時候丙挽，使用for...in,在遍歷數(shù)組的時候的時候使用for...of。
         //for in 循環(huán)遍歷對象屬性名
         let obj = {username:'zhangsan',age:22};
         for(let i in obj){
             console.log(i);  //username age
         }
     
         //for in 循環(huán)遍歷數(shù)組下標
         let arr = [1,3,'abc'];
         for(let i in arr){        //數(shù)組的可以用for of對應(yīng)數(shù)組值
             console.log(i); //0 1 2
         }
     
         //定義檢測數(shù)據(jù)類型的功能函數(shù)
         function checkedType(target){
             return Object.prototype.toString.call(target).slice(8,-1);
         }
         console.log(checkedType(result));  //Array
     
         //實現(xiàn)深度克隆--對象/數(shù)組
         function clone(target){
             //判斷拷貝的數(shù)據(jù)類型
             //初始化變量的result 成為最終克隆的數(shù)據(jù)
             let result,targetType = checkedType(target);
             if(targetType === 'Object'){
                 result = {};
             }else if(targetType === 'Array'){
                 result = [];
             }else{
                 return target;   //如果是基本數(shù)據(jù)類型:(String, Number, boolean, Null, Undefined)就直接反回去芒率。
             }
     
             //遍歷目標數(shù)據(jù)
             for(let i in target){
                //獲取遍歷數(shù)據(jù)結(jié)構(gòu)的每一項值。
                 let value = target[i];   //i=1,i=2,i=..
                   //判斷目標結(jié)構(gòu)里的每一值是否存在對象/數(shù)組
                 if(checkedType(value) === 'Object' || checkedType(value) === 'Array'){ //如果對象OR數(shù)組里嵌套了對象/數(shù)組
                     //繼續(xù)遍歷獲取到的value值
                     result[i] = clone(value);    //這個只執(zhí)行一次,數(shù)組里只有一個對象
                 }else{  //獲取到的value值是基本的數(shù)據(jù)類型或者是函數(shù)。
                     result[i] = value;  //因為arr3數(shù)組的下標0和1都是Number類型,只有下標2才是Object(轉(zhuǎn)去執(zhí)行1046行)
                 }
             }
             return result;
         }
         let arr3 = [1,2,{username:'dudu',age:32}];
         let arr4 = clone(arr3);    //相當于復制了一份arr3的基本數(shù)據(jù)
         console.log(arr4);
         arr4[2].username = 'gate';
         arr4[2].age = 65;
         console.log(arr3,arr4);  //arr3下標2是{username:'dudu':age:32},arr4下標2是{username:gate,age:65}

驗證數(shù)據(jù)類型

function checkedType(target){
        return Object.prototype.toString.call(target).slice(8,-1);//[object RegExp]
        //return Object.prototype.toString.apply(target).slice(8,-1);[object RegExp]
        //return Object.prototype.toString.bind(target).slice(8,-1);  toString() { [native code] }
     }
console.log( checkedType( /^1/ ) )

css中position

• relative, absolute, fixed,static, inherit, sticky

static默認值。沒有定位膘螟，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）俘闯。

relative生成相對定位的元素，相對于其正常位置進行定位肩豁。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素荷腊。

absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定撵孤。

fixed生成固定定位的元素，相對于瀏覽器窗口進行定位闭专。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。

sticky粘性定位廉赔，該定位基于用戶滾動的位置岗照。它的行為就像 position:relative; 而當頁面滾動超出目標區(qū)域時，它的表現(xiàn)就像 position:fixed;戳稽，它會固定在目標位置颂郎。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位吼渡。 Safari 需要使用 -webkit- prefix (查看以下實例)。

inherit 規(guī)定應(yīng)該從父元素繼承 position 屬性的值乓序。

當需要停止冒泡行為時寺酪，可以使用

function stopBubble(e) { 
//如果提供了事件對象，則這是一個非IE瀏覽器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否則竭缝，我們需要使用IE的方式來取消事件冒泡 
    window.event.cancelBubble = true; 
}

當需要阻止默認行為時房维，可以使用

//阻止瀏覽器的默認行為 
function stopDefault( e ) { 
    //阻止默認瀏覽器動作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函數(shù)器默認動作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}