前端初學基礎知識 2

1.SCSS語法

變量申明

• $+變量名+:+變量值 例$width:200px
• $width:200px 普通變量
• $width:200px !default 默認變量便可覆蓋

選擇器嵌套

<header>
    <nav>
        <a href="#">home</a>
        <a href="#">page</a>
    </nav>
</header>

scss

nav {
  a {
    color: red;
    
    header {
      color:green;
    }
  }  
}

屬性嵌套

css：

.box {
     font-size: 12px;
     font-weight: bold;
}

scss：

.box {
  font: {
   size: 12px;
   weight: bold;
  }  
}

僞類嵌套

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

聲明混合宏（可帶參數）

申明：

@mixin border-radius {
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

調用：

button {
    @include border-radius;
}

sass 繼承

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

• sass佔位符%：用佔位符聲明的代碼，若是不被@extend調用就不會被編譯。
• sass：支持加減乘除

2.JavaScript獲取元素父節點、子節點、兄弟節點

• el.parentNode:獲取元素父節點
• el.parentElement：獲取元素父節點，目前沒發現與parentNode的區別在哪裏
• el.childNodes:獲取元素子節點，會計算text，回車也算！
• el.children獲取元素子節點，不計算text.
• el.nextSibling:後一個節點
• el.previousSibling: 前一個節點

3.flex佈局

• display: flex
• display: inline-flex
• webkit內核瀏覽器加上-webkit前綴

基本概念

       容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫作main start，結束位置叫作main end；交叉軸的開始位置叫作cross start，結束位置叫作cross end。
項目默認沿主軸排列。單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size

容器的屬性

• flex-direction：項目排列方向row、column、row-reverse、column-reverse
• flex-wrap：nowrap、wrap、wrap-reverse
• flex-flow：flex-direction和flex-wrap的簡寫形式
• justify-content：主軸上的對齊方式flex-start、flex-end、center、space-between、space-around
• align-items：交叉軸上的對齊方式flex-start、flex-end、baseline、strentch
• align-content：多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

項目屬性

• order：項目的排列順序。數值越小，排列越靠前，默認爲0。
• flex-grow：項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。
• flex-shrink：項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小
• flex-basis：配多餘空間以前，項目佔據的主軸空間（main size）。
• flex：flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。
• algin-self：容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。

4.vuex 狀態管理模式

       核心概念：vuex應用的核心是store，裏面包含大部分的state，vuex的狀態存儲是響應式的，state中的狀態不能直接更改

• state
• gettter
• mutation
• action
• module

/*vueStore.js*/
import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './moduleA.js'

Vue.use(Vuex);

let state = {
  a1: 12,
  data: ['a','a','a','a','a']
};

let getters = {
  printData: state => {
    console.log(state.data);
    return state.data;
  }
};

let mutations = {
  setData(state, data){
    state.data = data;
  }
};

let actions = {
  setData({ commit },n){
    commit('setData', n);
  }
};

export default new Vuex.Store({
    strict: true,
    state,
    getters,
    mutations,
    actions,
    modules: {
    moduleA
  }
});

/*moduleA.js*/
let state = {
  data: ['A', 'A',' A', 'A', 'A']
};

let getters = {
  printDataA: state => {
    return state.data;
  }
};

let mutations = {
  setDataA(state, data) {
    state.data = data;
  }
};

let actions = {
  setDataA({commit}, n) {
    commit('setDataA', n);
  }
};

export default ({
  strict: true,//嚴格模式
  namespaced: true,
  state,
  getters,
  mutations,
  actions
})

state

       在根實例中註冊store選項，該store就會注入到下面的全部組件，子組件經過this.$store能訪問到

computed: {
        count () {
        return this.$store.state.data //['a','a','a','a','a']
        }
    }

getter

       getter相似於計算屬性，它的返回值會根據它的依賴被緩存起來，只有當它它的依賴值發生改變纔會從新計算，也能夠接受其餘get特然做爲第二個參數

getter會暴露store。getter對象

methods:{
    getData(){
        this.$store.getters.printData; //['a','a','a','a','a']
    }
}

經過方法訪問

getters: {
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false

mutation

       vuex中更改store中的狀態的惟一方法就是提交mutation，它接受state做爲第一個參數，觸發mutation的方法徐調用store.commit,咱們能夠向store.commit轉入額外的參數，即mutation的載荷（payload）

methods:{
      send(){
        this.$store.commit('setData', [0,0,0,0,0]);
        console.log(this.$store.state.data); //[0,0,0,0,0]
      }

mutation必須是同步函數；

action

action相似於mutation，不一樣在於：

• action提交的是mutation。而不是直接改變狀態。
• action能夠包含任意異步操做。

       action接受一個與store實例具備相同方法和屬性的context對象，context.commit來提交一個mutation、context.state、context.getters

Action 經過 store.dispatch 方法觸發：

methods:{
      send(){
        this.$store.dispatch('setData', [0,0,0,0,0]);
        console.log(this.$store.state.data); //[0,0,0,0,0]
      }
    }

module

       Vuex 容許咱們將 store 分割成模塊（module）。每一個模塊擁有本身的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行一樣方式的分割

store.state.moduleA //moduleA的狀態
store.commit('setDataA',[0,0,0,0,0]) //觸發moduleA的mutation中的setDataA
store.dispatch('setDataA',[0,0,0,0,0]) //moduleA  actions
store.getters.printDataA; //getter

命名空間
       默認狀況下模塊內部的action、mutation、getter是註冊在全局命名空間的，因此多個模塊可以對同一mutation、action作出響應。添加namespaced: true的方式使其成爲命名空間模塊，它的全部 getter、action 及 mutation 都會自動根據模塊註冊的路徑調整命名。

store.state.moduleA //moduleA的狀態
store.commit('moduleA/setDataA',[0,0,0,0,0]) //觸發moduleA的mutation中的setDataA
store.dispatch('moduleA/setDataA',[0,0,0,0,0]) //moduleA  actions
store.getters['moduleA/printDataA']; //moduleA  getter

5.axios

1、請求的方式

一、經過配置發送請求

axios(config);
axios(url[,config]);

axios({
    method:"POST",
    url:'/user/a',
    data:{
        msg: 'helloWorld'
    }
});

二、經過別名發送請求

axios.request(config);

axios.get(url[,config]);

axios.delete(url[,config]);

axios.head(url[,config]);

axios.post(url[,data[,config]]);

axios.put(url[,data[,config]])

axios.patch(url[,data[,config]])

三、併發請求

axios.all(params)
axios.spread(callback) ; //callback要等到全部請求都完成纔會執行

四、建立axios實例

axios.create([config])
實例方法

axios#request(config)
axios#get(url[,config])
axios#delete(url[,config])
axios#head(url[,config])
axios#post(url[,data[,config]])
axios#put(url[,data[,config]])
axios#patch(url[,data[,config]])

2、請求的配置參數

• url: 請求地址
• method：請求方式默認get
• baseURL：相對地址
• transformRequest：選項容許咱們在請求發送到服務器以前對請求的數據作出一些改動
• transformResponse：選項容許咱們在數據傳送到then/catch方法以前對數據進行改動
• headers：自定義請求頭信息
• params：項是要隨請求一塊兒發送的請求參數----通常連接在URL後面
• data：選項是做爲一個請求體而須要被髮送的數據，該選項只適用於方法：put/post/patch
• timeout：若是請求花費的時間超過延遲的時間，那麼請求會被終止
• responseType：返回數據的格式
• onUploadProgress：下載進度的事件
• ...

獲取響應信息

/*search.js*/
import axios from 'axios';

export default function (keywords, type) {
  const require = new Promise((resolve, reject) => {
    axios.get('http://47.94.16.170:3000/search',{
      params:{
        keywords: keywords,
        type: type
      },
    }).then((data)=> {
      resolve(data);
    })
  });
  return require;
}


/*調用*/
import search from '@/api/search';

let that = this;
search(this.searchText, this.searchType).then(function (data) {
    that.content = data.result;
})

3、默認配置

1.全局默認配置

axios.defaults.baseURL = 'http://api.exmple.com';

2.自定義的實例默認設置

var instance = axios.create({
    baseURL: 'https://api.example.com'
});

instance.defaults.headers.common["Authorization"] = AUTH_TOKEN;

instance.get('/longRequest',{
  timeout: 5000
});

3.配置優先級

lib/defaults.js < 實例中的默認配置 < 請求中的默認配置

4、攔截器

//添加一個請求攔截器
axios.interceptors.request.use(function(config){
  //在請求發出以前進行一些操做
  return config;
},function(err){
  //Do something with request error
  return Promise.reject(error);
});
//添加一個響應攔截器
axios.interceptors.response.use(function(res){
  //在這裏對返回的數據進行處理
  return res;
},function(err){
  //Do something with response error
  return Promise.reject(error);
})