前端初學基礎知識 2

JowayYoung 發布于2019-08-26 17:23 / 1021人閱讀

摘要：數值越小，排列越靠前，默認為。而不是直接改變狀態。接受一個與實例具有相同方法和屬性的對象，來提交一個通過方法觸發允許我們將分割成模塊。添加的方式使其成為命名空間模塊，它的所有及都會自動根據模塊注冊的路徑調整命名。

1.SCSS語法 變量申明

$+變量名+:+變量值例$width:200px

$width:200px 普通變量

$width:200px !default 默認變量即可覆蓋

選擇器嵌套


    
        home
        page

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"
    }
});

2、通過別名發送請求

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]])

3、并發請求

axios.all(params)
axios.spread(callback) ; //callback要等到所有請求都完成才會執行

4、創建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]])

二、請求的配置參數

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;
})

三、默認配置 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 < 實例中的默認配置 < 請求中的默認配置

四、攔截器

//添加一個請求攔截器
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);
})

GPU云服務器云服務器前端初學者前端開發初學者前端開發基礎知識前端知識

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/110136.html

我是如何從零開始學習前端的

摘要：相關頻道最后的坦白最后我得承認這一次我又標題黨了無非是想吸引更多前端初學者進來，希望大家都能少走一些彎路，也希望那些從零開始自學前端的同學更有勇氣去面對自己的選擇。我是怎么走上前端開發這條路？首先，我是個文科生，大學里只學過vb，覺得計算機編程這東西太玄乎，不是我玩得轉的。后來機緣巧合去做了一家互聯網創業公司的HR，閱了上千份程序員的簡歷，面了上百個不同水平不同領域的程序員。跟程...

mykurisu 2019-08-19 17:55 評論0 收藏0
Java 初學者做的第一個微信小程序總結--關于Java基礎

摘要：官方資料微信公眾平臺注冊小程序。官網開發文檔社區開發工具部署微信小程序微信小程序本身不需要部署，在微信開發工具中直接上傳代碼就行。為什么學習 Java 三年，目前已經工作了2年，因為自學，基礎差，所以打算年末總結一下常見的基礎知識和面試點；也可以通過獨立做一個項目整合自己工作期間學習的知識，加深印象。但是想著回家或是平時手機用的多，做一款APP和小程序很方便查看。項目展示本...

mudiyouyou 2019-08-16 14:30 評論0 收藏0
零基礎的前端開發初學者應如何系統地學習？

摘要：在有了基礎之后，進一步學習內容包括框架。前端學習交流群禁止閑聊，非喜勿進。代碼提交前必須做的三個事情檢查所有變更跑一邊單元測試手動運行一遍所有網站開發開發大致分為前端和后端，前端主要負責實現視覺和交互效果，以及與服務器通信，完成業務邏輯。其核心價值在于對用戶體驗的追求。可以按如下思路學習系統學習：基礎知識： html + css 這部分建議在?w3school 在線教程上學習，邊...

JouyPub 2019-08-01 17:53 評論0 收藏0
零基礎的前端開發初學者應如何系統地學習？

摘要：在有了基礎之后，進一步學習內容包括框架。前端學習交流群禁止閑聊，非喜勿進。代碼提交前必須做的三個事情檢查所有變更跑一邊單元測試手動運行一遍所有網站開發開發大致分為前端和后端，前端主要負責實現視覺和交互效果，以及與服務器通信，完成業務邏輯。其核心價值在于對用戶體驗的追求。可以按如下思路學習系統學習：基礎知識： html + css 這部分建議在?w3school 在線教程上學習，邊...

funnyZhang 2019-08-29 13:42 評論0 收藏0
前端——基礎

摘要：思路屢清楚后，我們就開始說零基礎如何自學前端開發。首先，了解前端是干什么用的，簡單來說就是負責把網站的頁面以一種更好的用戶體驗提供給客戶的一份工作，就是做網站開發的。其實這個問題很簡單，我用最簡單的語言給大家描述一下，學習一樣東西就要了解這樣東西學完了要干什么事情，有什么作用。然后就是應該學習哪些必要的內容，該如何運用得當的方法進行有效率的學習不至于自己摸不著頭腦，然后就是一直堅持下去，直到...

番茄西紅柿 2019-04-23 13:16 評論0 收藏0
前端初學基礎知識 3

摘要：根據瀏覽器設備的繪制限制來更新動畫，回調的次數常是每秒次。鼠標移入則停止自動改變樹枝狀態，轉為由鼠標的橫縱坐標控制。基本的深拷貝方法數組，等方法，新增運算符對象思路是把對象拆開分別賦值，同樣可以使用新增運算符，循環等。 canvas動畫 ???????動畫的形成：先畫出一幅圖，改變其中的一些參數，重新繪制圖片...不斷的重復形成動畫。 fillStyle:設置或返回填充繪畫的顏色，漸...

Chao 2019-08-22 16:15 評論0 收藏0