前端初學基礎知識 1

前端學習記錄 week 1

基礎知識

CSS盒模型

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

• Margin - 清除邊框外的區域，外邊距是透明的。
• Border - 圍繞在內邊距和內容外的邊框。
• Padding - 清除內容周圍的區域，內邊距是透明的。
• Content(內容) - 盒子的內容，顯示文本和圖像。
• CSS3新增box-sizing；border-box：將padding、border的寬度計算在寬度width裏面。

html5標籤

• template: 經過 JavaScript 在運行時實例化內容的容器。
• header: 定義頁面或章節的頭部。它常常包含 logo、頁面標題和導航性的目錄。
• footer: 定義頁面或章節的尾部。它常常包含版權信息、法律信息連接和反饋建議用的地址。
• aside: 定義和頁面內容關聯度較低的內容——若是被刪除，剩下的內容仍然很合理。
• section: 定義文檔中的一個章節。
• nav: 定義只包含導航連接的章節。
• audio：定義音頻內容(屬性：autoplay、controls、loop、muted、preload)
• video: 定義視頻（屬性同上）

- JavaScript數據類型及數據結構

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模塊化

爲了避免讓分塊的代碼污染全局，以及更好地使用別人的代碼因此產生了JavaScript模塊化的需求

可使用當即執行函數

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

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

• 閉包

CSS3部分新特性

• 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：建立動畫規則

vue基礎

經常使用指令

• 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}"    
<div v-bind:class="[isActive ? activeClass : '', errorClass]">

實踐

1、我的中心-生活館頁面

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

1. 內層div的margin-top屬性轉移到了外層div上

<div class="member-card">
        <!--header外邊距體如今外層div上-->
      <header>{{constellation}}</header>
        <footer>
        <div>{{memberGrade}}</div>
        <div>{{memberName}}</div>
      </footer>
    </div>

緣由：

• 當兩個垂直外邊距相遇時，它們將造成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
• 當一個元素包含在另外一個元素中時（若是沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。
• 空元素，它有外邊距，可是沒有邊框或填充，則上下邊距會發生合併

解決方法

• 給外層元素加內邊距邊框
• 去掉內層元素的mqrgin改成直接設置外層元素padding

2.事件冒泡

<div class="root">
    <div class="father">
      <div class="child"></div>
    </div>
  </div>

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層次結構像至低向上直到頂端，這就是事件冒泡。

3. 阻止冒泡

實現彈窗，而後點擊空其餘任意地方隱藏彈窗

<!--html-->
  <div class="father">
    <div class="child"></div>
  </div>

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

<!--vue-->
  <div class="father">
    <div class="child" @click.stop=""></div>
  </div>

2、根據現有項目學習編碼規範以及項目結構並嘗試編寫

*模仿網易雲音樂播放器頁面
地址：https://gitee.com/zhangweiqin...

代碼規範

1. tab = 2Space
2. 移動端使用rem佈局
3. 生命週期排列順序：name、props、components、data、create、mounted、computed、watch、beforedestroy、methods
4. 自定義組件使用小駝峯命名

目錄結構

• 根組件App.vue
• 頁面組件：src/view
• 頁面模塊：src/view/modules
• 路由：src/router
• 通用組件：src/components

rem自適應佈局

先了解：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'}});
<router-link :to="{ name: 'helloWorld', query: { msg: 'hello!' }}"></router-link>

this.$router.push({ name: 'helloWorld', params: { msg: 'hello'}});
 <router-link :to="{ name: 'helloWorld', params: { msg: 'hello' }}"></router-link>

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
    },

• 數據傳遞

父組件->子組件：

<!--發送-->
  <userSetting :data="'msg from father'">
  </userSetting>

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

子組件->父組件：

<!--發送-->
  <div class="set-item" 
       @click="$emit('msgFromSon','msg from son')">
       高級設置
  </div>

<!--接收-->
  <userSetting
    v-show="setting"
    @msgFromSon="recive">
  </userSetting>

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

Vue.extend()、$mount()

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

let alertOptions = {
    data:function(){
      return {
        title: title,
        text: text,
      }
    },
    methods:{
      close() {
        resolve('ok');
        dialogClose(vm);
      }
    },
    template: '<alert @close="close" :title="this.title" :text="this.text"></alert>',
      components: {alert}
  }

  let creator = Vue.extend(alertOptions)

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

//掛在到#app下
  new creator().$mount('#app')
  
  //在文檔以外渲染而且隨後掛載
  vm = new creator().$mount()
  dialogContainer.appendChild(vm.$el)