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

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

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

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

Padding - 清除內(nèi)容周?chē)膮^(qū)域，內(nèi)邊距是透明的。

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

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

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

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

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

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

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

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

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

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

JavaScript是一種弱類(lèi)型語(yǔ)言

6種原始類(lèi)型

Bool

Object

String

Null

Undefined

Number

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

對(duì)象的屬性

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

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

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

對(duì)象的創(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() – 返回字符串的一個(gè)子串。傳入?yún)?shù)是起始位置和結(jié)束位置。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

外部不能直接訪問(wèn)模塊內(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：過(guò)度

animation：動(dòng)畫(huà)

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

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

v-show

v-on 縮寫(xiě)@

v-bind

v-model

v-for

v-html

v-text

特性

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

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

樣式

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

類(lèi)

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

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

    

        
      
{{constellation}}
        
    

原因：

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

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

空元素，它有外邊距，但是沒(méi)有邊框或填充，則上下邊距會(huì)發(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時(shí)控制臺(tái)依次顯示：child、father、root。按照DOM層次結(jié)構(gòu)像至低向上直到頂端，這就是事件冒泡。

實(shí)現(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)易云音樂(lè)播放器頁(yè)面
地址：https://gitee.com/zhangweiqin...

tab = 2Space

移動(dòng)端使用rem布局

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

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

根組件App.vue

頁(yè)面組件：src/view

頁(yè)面模塊：src/view/modules

路由：src/router

通用組件：src/components

先了解：rem、em、px

px：相對(duì)長(zhǎng)度單位。像素px是相對(duì)于顯示器屏幕分辨率而言的。

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

rem：相對(duì)長(zhǎng)度大小，相對(duì)于根元素字體大小

因?yàn)閞em大小只和根元素字體大小有關(guān)所以只要根據(jù)設(shè)備設(shè)置不同的根元素大小，然后以相同的rem作單位得到的實(shí)際大小是不同的，實(shí)現(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)境下開(kāi)發(fā)則相應(yīng)的除以360，
根據(jù)設(shè)計(jì)稿的寬度不同選擇方便計(jì)算的方式。
*/

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

{path: "/", redirect: "/index/myMusic"}, //重定向
  {//主界面
    path: "/index",
    name: "index",
    component: index,
    children: [
      {//我的音樂(lè)
        path: "/index/myMusic",
        name: "myMusic",
        component: myMusic
      }, {//發(fā)現(xiàn)
        path: "/index/findMusic",
        name: "findMusic",
        component: findMusic
      }
    ]
  },
  {//歌單頁(yè)面
    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ù)會(huì)被附加到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)：最大化的實(shí)現(xiàn)隨用隨載，減少首頁(yè)加載延遲；缺點(diǎn)：可能會(huì)造成網(wǎng)頁(yè)顯示過(guò)慢且渲染參差不齊的問(wèn)題

組件注冊(cè)

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

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

父組件->子組件：

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

子組件->父組件：

  
  

       高級(jí)設(shè)置
  

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

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

  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()：手動(dòng)地掛載一個(gè)未掛載的實(shí)例。

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