摘要：前端學(xué)習(xí)記錄基礎(chǔ)知識盒模型所有元素可以看作盒子，在中，這一術(shù)語是用來設(shè)計和布局時使用。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。按照層次結(jié)構(gòu)像至低向上直到頂端，這就是事件冒泡。

所有HTML元素可以看作盒子，在CSS中，"box model"這一術(shù)語是用來設(shè)計和布局時使用。CSS盒模型本質(zhì)上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內(nèi)容

Margin - 清除邊框外的區(qū)域，外邊距是透明的。

Border - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。

Padding - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。

Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

CSS3新增box-sizing；border-box：將padding、border的寬度計算在寬度width里面。

template: 通過 JavaScript 在運(yùn)行時實例化內(nèi)容的容器。

header: 定義頁面或章節(jié)的頭部。它經(jīng)常包含 logo、頁面標(biāo)題和導(dǎo)航性的目錄。

footer: 定義頁面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址。

aside: 定義和頁面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。

section: 定義文檔中的一個章節(jié)。

nav: 定義只包含導(dǎo)航鏈接的章節(jié)。

audio：定義音頻內(nèi)容(屬性：autoplay、controls、loop、muted、preload)

video: 定義視頻（屬性同上）

JavaScript是一種弱類型語言

6種原始類型

Bool

Object

String

Null

Undefined

Number

*可以使用typeof 判斷數(shù)據(jù)類型，數(shù)組以及null都屬于Object
*Object屬于引用類型，具有：constructor、hasOwnProperty、isPropertyOf、propertyIsEnumerable等方法。

對象的屬性

數(shù)據(jù)屬性：包含一個數(shù)據(jù)值的位置，可以讀寫包含Configurable、Enumerable、Writable、Value 4個特性

訪問器屬性: 不含數(shù)據(jù)值可以包含getter、setter函數(shù)，讀取以及寫入會分別觸發(fā)這兩個方法，包含Configurable、Enumerable、get、set特性

修改默認(rèn)特性使用defineProperty（），訪問器屬性不能直接定義，只能調(diào)該用方法。

對象的創(chuàng)建

工廠模式

構(gòu)造函數(shù)

原型模式

構(gòu)造函數(shù)：

  function Person(name, age ,job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
        console.log(this.name);
    }
  }
  
  let person1 = new Person("name", 20, "job");

原型模式:

  function Person(){
  }
  
  Person.prototype.name = "name";
  Person.prototype.age = 20;
  Person.prototype.job = "job";
  Person.prototype.sayName = function(){
     console.log(this.name);
  }
  
  let person1 = new Person();

JavaScript常用的字符串操作

substring() – 返回字符串的一個子串。傳入?yún)?shù)是起始位置和結(jié)束位置。

substr() - 返回字符串的一個子串。傳入?yún)?shù)是起始位置和個數(shù)。

replace() – 用來查找匹配一個正則表達(dá)式的字符串，然后使用新字符串代替匹配的字符串。

slice() – 提取字符串的一部分，并返回一個新字符串。

split() – 通過將字符串劃分成子串，將一個字符串做成一個字符串?dāng)?shù)組。

length – 返回字符串的長度，所謂字符串的長度是指其包含的字符的個數(shù)。

toLowerCase() – 將整個字符串轉(zhuǎn)成小寫字母。

toUpperCase() – 將整個字符串轉(zhuǎn)成大寫字母。

concat() – 將兩個或多個字符的文本組合起來，返回一個新的字符串。

indexOf() – 返回字符串中一個子串第一處出現(xiàn)的索引。如果沒有匹配項，返回 -1 。

charAt() – 返回指定位置的字符。

match() – 檢查一個字符串是否匹配一個正則表達(dá)式

JavaScript常用的數(shù)組操作

- concat - 合并數(shù)組
- push、pop - 分別為添加、刪除元素，堆棧形式
- unshift、shift  - 添加、刪除元素，隊列形式
- reverse - 反轉(zhuǎn)
- sort() - 排序， arr.sort(function(a,b){return a-b;} 輸入比較函數(shù)
- slice、splice - 刪除，參數(shù)為起始位置和個數(shù)，slice不改變原素組，返回新數(shù)組，splice會改變原素組，返回被刪除的數(shù)組。
- substring、substr - 截取數(shù)組，類似于上面字符串中的這兩個方法。

為了不讓分塊的代碼污染全局，以及更好地使用別人的代碼所以產(chǎn)生了JavaScript模塊化的需求

可以使用立即執(zhí)行函數(shù)

  var params = "test";
  
  var module = (function(params){
    var mod = function(){
      //...
    };
    return {mod: mod};
  })(params);

外部不能直接訪問模塊內(nèi)部的變量，傳入外部變量后，在內(nèi)部改變它的值也不影響全局。

閉包

border-radius: 邊框圓角

box-sizing：border-box、content-box

box-shadow： 陰影

background-size

background-origin：背景顯示區(qū)域，content-box、padding-box 或 border-box

text-shadow：文字陰影

word-wrap：文本強(qiáng)制換行

@font-face： 字體

transform：2D，3D轉(zhuǎn)換 ratate、translate、scale、skew

transition：過度

animation：動畫

@keyframes：創(chuàng)建動畫規(guī)則

v-if、v-else-if、v-else

v-show

v-on 縮寫@

v-bind

v-model

v-for

v-html

v-text

特性

ref：在元素上添加該屬性，替代原生JavaScript獲取dom操作 this.$refs.name

以下寫法涉及到了所有樣式以及類名的綁定方式，不詳細(xì)說明了

樣式

:style=“[item.a,item.b]” 
:style="{width:item.value+"px"}"   
:style="{color: activeColor, fontSize: fontSize + "px" }"
:style="item.titlefont"
:style="a<0? "color:red":"color:black""
:style="item.choosetype==3?{width:ul_width+"px"}:"""

類

:class="{a:item.x==1}"     
:class="[b ,{a:item.x==1}]"    
:class="{a:item.x==1, b:item.x==2}"    

遇到的問題以及學(xué)習(xí)到的知識點(diǎn)

    

        
      
{{constellation}}
        
    

原因：

當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

當(dāng)一個元素包含在另一個元素中時（如果沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。

空元素，它有外邊距，但是沒有邊框或填充，則上下邊距會發(fā)生合并

解決方法

給外層元素加內(nèi)邊距邊框

去掉內(nèi)層元素的mqrgin改為直接設(shè)置外層元素padding

  let root = document.getElementsByClassName("root")[0];
  let father = document.getElementsByClassName("father")[0];
  let child = document.getElementsByClassName("child")[0];

  root.onclick = function () {
    console.log("root");
  };
  father.onclick = function () {
    console.log("father");
  };
  child.onclick = function () {
    console.log("child");
  };
 

點(diǎn)擊最內(nèi)層div時控制臺依次顯示：child、father、root。按照DOM層次結(jié)構(gòu)像至低向上直到頂端，這就是事件冒泡。

實現(xiàn)彈窗，然后點(diǎn)擊空其他任意地方隱藏彈窗

/*javascript*/
  let father = document.getElementsByClassName("root")[0];
  let child = document.getElementsByClassName("child")[0];

  father.onclick = function () {
    console.log("father");
  };
  child.onclick = function (e) {
    let ev = e||window.event;
    ev.stopPropagation();
  };

*模仿網(wǎng)易云音樂播放器頁面
地址：https://gitee.com/zhangweiqin...

tab = 2Space

移動端使用rem布局

生命周期排列順序：name、props、components、data、create、mounted、computed、watch、beforedestroy、methods

自定義組件使用小駝峰命名

根組件App.vue

頁面組件：src/view

頁面模塊：src/view/modules

路由：src/router

通用組件：src/components

先了解：rem、em、px

px：相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。

em：是相對長度單位,是所在元素的字體大小，沒設(shè)置則一層層往上直獲取字體大小至瀏覽器默認(rèn)字體大小。

rem：相對長度大小，相對于根元素字體大小

因為rem大小只和根元素字體大小有關(guān)所以只要根據(jù)設(shè)備設(shè)置不同的根元素大小，然后以相同的rem作單位得到的實際大小是不同的，實現(xiàn)自適應(yīng)。

document.documentElement.style.fontSize = document.documentElement/375*20 + "px";
/*
這樣 如果在寬度為375（iphone6/7/8）的環(huán)境下1rem = 20px.
也可以選擇在寬度為360（大部分1080p屏幕）的環(huán)境下開發(fā)則相應(yīng)的除以360，
根據(jù)設(shè)計稿的寬度不同選擇方便計算的方式。
*/

App.vue下目前只有主頁面以及歌單頁面，主界面下兩個子路由：我的音樂、發(fā)現(xiàn)，兩個組件：個人設(shè)置頁面、播放控制條。

{path: "/", redirect: "/index/myMusic"}, //重定向
  {//主界面
    path: "/index",
    name: "index",
    component: index,
    children: [
      {//我的音樂
        path: "/index/myMusic",
        name: "myMusic",
        component: myMusic
      }, {//發(fā)現(xiàn)
        path: "/index/findMusic",
        name: "findMusic",
        component: findMusic
      }
    ]
  },
  {//歌單頁面
    path: "/songList",
    name: "songList",
    component: songList
  }

路由的使用以及傳參：（兩種方式）

{
  path: "helloWorld",
  name: helloWorld,
  component: ···
}
this.$router.push({path: "/helloWorld",query: {msg: "hello"}});


this.$router.push({ name: "helloWorld", params: { msg: "hello"}});
 

console.log(this.$route.query);  //{msg:hello},不同的是query傳遞參數(shù)會被附加到url地址上
console.log(this.$route.params); //{msg:hello}

引入組件,兩種加載方式

  1. import userSetting from "@/view/modules/userSetting.vue";
  2. const userSetting = resolve => require(["@/view/modules/userSetting.vue"],resolve);  //懶加載

異步加載，優(yōu)點(diǎn)：最大化的實現(xiàn)隨用隨載，減少首頁加載延遲；缺點(diǎn)：可能會造成網(wǎng)頁顯示過慢且渲染參差不齊的問題

組件注冊

    //單文件組件
    components: {
      userSetting
    },

數(shù)據(jù)傳遞

父組件->子組件：

  //接收
  export default {
    name: "user-setting",
    props:["data"]
  }

子組件->父組件：

  
  

       高級設(shè)置
  

  methods: {
    recive(msg) {
      console.log(msg);  //msg from son
    }  
  }

Vue.extend(): 使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個“子類”。參數(shù)是一個包含組件選項的對象。

  let alertOptions = {
    data:function(){
      return {
        title: title,
        text: text,
      }
    },
    methods:{
      close() {
        resolve("ok");
        dialogClose(vm);
      }
    },
    template: "",
      components: {alert}
  }

  let creator = Vue.extend(alertOptions)

vm.$mount()：手動地掛載一個未掛載的實例。

  //掛在到#app下
  new creator().$mount("#app")
  
  //在文檔之外渲染并且隨后掛載
  vm = new creator().$mount()
  dialogContainer.appendChild(vm.$el)