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

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

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

Border - 圍繞在內邊距和內容外的邊框。

Padding - 清除內容周圍的區域，內邊距是透明的。

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

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

template: 通過 JavaScript 在運行時實例化內容的容器。

header: 定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄。

footer: 定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。

aside: 定義和頁面內容關聯度較低的內容——如果被刪除，剩下的內容仍然很合理。

section: 定義文檔中的一個章節。

nav: 定義只包含導航鏈接的章節。

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

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

JavaScript是一種弱類型語言

6種原始類型

Bool

Object

String

Null

Undefined

Number

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

對象的屬性

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

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

修改默認特性使用defineProperty（），訪問器屬性不能直接定義，只能調該用方法。

對象的創建

工廠模式

構造函數

原型模式

構造函數：

  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() – 返回字符串的一個子串。傳入參數是起始位置和結束位置。

substr() - 返回字符串的一個子串。傳入參數是起始位置和個數。

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

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

split() – 通過將字符串劃分成子串，將一個字符串做成一個字符串數組。

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

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

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

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

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

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

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

JavaScript常用的數組操作

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

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

可以使用立即執行函數

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

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

閉包

border-radius: 邊框圓角

box-sizing：border-box、content-box

box-shadow： 陰影

background-size

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

text-shadow：文字陰影

word-wrap：文本強制換行

@font-face： 字體

transform：2D，3D轉換 ratate、translate、scale、skew

transition：過度

animation：動畫

@keyframes：創建動畫規則

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

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

樣式

: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}"    

遇到的問題以及學習到的知識點

    

        
      
{{constellation}}
        
    

原因：

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

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

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

解決方法

給外層元素加內邊距邊框

去掉內層元素的mqrgin改為直接設置外層元素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");
  };
 

點擊最內層div時控制臺依次顯示：child、father、root。按照DOM層次結構像至低向上直到頂端，這就是事件冒泡。

實現彈窗，然后點擊空其他任意地方隱藏彈窗

/*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();
  };

*模仿網易云音樂播放器頁面
地址：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：是相對長度單位,是所在元素的字體大小，沒設置則一層層往上直獲取字體大小至瀏覽器默認字體大小。

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

因為rem大小只和根元素字體大小有關所以只要根據設備設置不同的根元素大小，然后以相同的rem作單位得到的實際大小是不同的，實現自適應。

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

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

{path: "/", redirect: "/index/myMusic"}, //重定向
  {//主界面
    path: "/index",
    name: "index",
    component: index,
    children: [
      {//我的音樂
        path: "/index/myMusic",
        name: "myMusic",
        component: myMusic
      }, {//發現
        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傳遞參數會被附加到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);  //懶加載

異步加載，優點：最大化的實現隨用隨載，減少首頁加載延遲；缺點：可能會造成網頁顯示過慢且渲染參差不齊的問題

組件注冊

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

數據傳遞

父組件->子組件：

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

子組件->父組件：

  
  

       高級設置
  

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

Vue.extend(): 使用基礎 Vue 構造器，創建一個“子類”。參數是一個包含組件選項的對象。

  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)