導(dǎo)讀1.git代碼下載重復(fù)怎么辦？回滾一下，重新pull,避免誤操作2.為什么要用Less,sass?他們是css預(yù)處理器。他們是css上的一種抽象層。他們是一....

1.git代碼下載重復(fù)怎么辦？

回滾一下，重新pull,避免誤操作

2.為什么要用Less,sass?

他們是css預(yù)處理器。他們是css上的一種抽象層。他們是一種特殊的語(yǔ)法/語(yǔ)言編譯成css

less是一種動(dòng)態(tài)樣式語(yǔ)言，將css賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量，繼承，運(yùn)算，函數(shù)，less既可以在客戶端上運(yùn)行（支持IE6 ,webkit,Firefoxx）,也可以在服務(wù)端運(yùn)行（借助node.js）

• .結(jié)構(gòu)清晰，便于擴(kuò)展，
• 可以方便的屏蔽瀏覽器私有語(yǔ)法差異，
• 可以輕松實(shí)現(xiàn)多重繼承，
• 完全兼容css代碼，可以方便地應(yīng)用到

區(qū)別

sass和less主要區(qū)別：在于實(shí)現(xiàn)方式less是基于javasscript的在客戶端處理所以安裝的時(shí)候用npm,

sass是基于ruby所以在服務(wù)器處理

3.什么是盒子模型？

把所有的網(wǎng)頁(yè)元素都堪稱一個(gè)盒子，它具有content,padding,border,margin,四個(gè)屬性，這就是盒子模型

4.清除浮動(dòng)的方法？（四種）

方式一:使用overflow屬性來(lái)清除浮動(dòng)

　　　　.ovh{

　　　　　　overflow:hidden;

　　　　　}

先找到浮動(dòng)盒子的父元素，再在父元素中添加一個(gè)屬性：overflow:hidden,就是清除這個(gè)父元素中的子元素浮動(dòng)對(duì)頁(yè)面的影響.

　　注意：一般情況下也不會(huì)使用這種方式，因?yàn)閛verflow:hidden有一個(gè)特點(diǎn)，離開了這個(gè)元素所在的區(qū)域以后會(huì)被隱藏（overflow:hidden會(huì)將超出的部分隱藏起來(lái)）.

方式二:使用額外標(biāo)簽法

　　　　.clear{

　　　　　　clear:both;

　　　　　}

　　在浮動(dòng)的盒子之下再放一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽中使用clear:both，來(lái)清除浮動(dòng)對(duì)頁(yè)面的影響.

　　a.內(nèi)部標(biāo)簽：會(huì)將這個(gè)浮動(dòng)盒子的父盒子高度重新?lián)伍_.

　　b.外部標(biāo)簽：會(huì)將這個(gè)浮動(dòng)盒子的影響清除，但是不會(huì)撐開父盒子.

　　注意：一般情況下不會(huì)使用這一種方式來(lái)清除浮動(dòng)。因?yàn)檫@種清除浮動(dòng)的方式會(huì)增加頁(yè)面的標(biāo)簽，造成結(jié)構(gòu)的混亂.

方法三:使用偽元素來(lái)清除浮動(dòng)(after意思:后來(lái),以后)

　　　　.clearfix:after{

　　　　　　content:"";//設(shè)置內(nèi)容為空

　　　　　　height:0;//高度為0

　　　　　　line-height:0;//行高為0

　　　　　　display:block;//將文本轉(zhuǎn)為塊級(jí)元素

　　　　　　visibility:hidden;//將元素隱藏

　　　　　　clear:both//清除浮動(dòng)

　　　　　}

　　　　.clearfix{

　　　　　　zoom:1;為了兼容IE

　　　　}

方法四:使用雙偽元素清除浮動(dòng)

　　　　.clearfix:before,.clearfix:after {

content: "";

display: block;

clear: both;

}

.clearfix {

zoom: 1;

}

總結(jié):第一種方法會(huì)將超出部分隱藏在某些時(shí)候我們想清除浮動(dòng)并且保留超出部分時(shí)做不到,第二種方法會(huì)增加許多不必要的標(biāo)簽,

所以我們盡量使用第三種方法來(lái)清除浮動(dòng),為什么不選擇第四種方法呢?因?yàn)榈谒姆N是第三種的改良版雖然比較簡(jiǎn)便,但是不嚴(yán)謹(jǐn)!

5.同步和異步的區(qū)別？

同步：

同步的思想是：所有的操作都做完，才返回給用戶。這樣用戶在線等待的時(shí)間太長(zhǎng)，給用戶一種卡死了的感覺（就是系統(tǒng)遷移中，點(diǎn)擊了遷移，界面就不動(dòng)了，但是程序還在執(zhí)行，卡死了的感覺）。這種情況下，用戶不能關(guān)閉界面，如果關(guān)閉了，即遷移程序就中斷了。

異步：

將用戶請(qǐng)求放入消息隊(duì)列，并反饋給用戶，系統(tǒng)遷移程序已經(jīng)啟動(dòng)，你可以關(guān)閉瀏覽器了。然后程序再慢慢地去寫入數(shù)據(jù)庫(kù)去。這就是異步。但是用戶沒有卡死的感覺，會(huì)告訴你，你的請(qǐng)求系統(tǒng)已經(jīng)響應(yīng)了。你可以關(guān)閉界面了。

6.http狀態(tài)碼有那些，分別代表是什么意思？

200 OK：服務(wù)器成功處理了請(qǐng)求（這個(gè)是我們見到最多的）

301 Moved Permanently：資源移動(dòng)。所請(qǐng)求資源自動(dòng)到新的URL，瀏覽器自動(dòng)跳轉(zhuǎn)到新的URL

304 Not Modified：服務(wù)端的資源與客戶端上一次請(qǐng)求的一致，不需要重新傳輸，客戶端使用本地緩存的即可

400 Bad Request：用于告訴客戶端它發(fā)送了一個(gè)錯(cuò)誤的請(qǐng)求

404 Not Found：(頁(yè)面丟失)未找到資源

500 Internal Server Error：服務(wù)器內(nèi)部出現(xiàn)了錯(cuò)誤

501 Internal Server Error：服務(wù)器遇到一個(gè)錯(cuò)誤，使其無(wú)法對(duì)請(qǐng)求提供服務(wù)

7.“==”和“===”還有“！=”和“！==”的區(qū)別？

==：運(yùn)算符稱作相等，用來(lái)檢測(cè)兩個(gè)操作數(shù)是否相等，這里的相等定義的非常寬松，可以允許進(jìn)行類型轉(zhuǎn)換

===：用來(lái)檢測(cè)兩個(gè)操作數(shù)是否嚴(yán)格相等

！=：會(huì)轉(zhuǎn)換成相同的類型進(jìn)行比較

！==：除了比對(duì)值，還比對(duì)類型

8.json字符串如何轉(zhuǎn)換為json對(duì)象？json對(duì)象如何轉(zhuǎn)換為json字符串？

json字符串

json對(duì)象：

方法有三種：轉(zhuǎn)換函數(shù)，jq的轉(zhuǎn)換函數(shù)，eval()方法

方法1--轉(zhuǎn)換函數(shù)：JSON.parse()方法

注意：IE8（兼容模式）ok，但是IE6和IE7沒有JSON對(duì)象，需要額外引入json.js或者json2.js。

方法2：parseJSON()方法 ，將字符串轉(zhuǎn)換成非字符串

用的是jquery的插件

反過(guò)來(lái)，使用 serialize 系列方法：如：var fields = $("select, :radio").serializeArray();

方法3：eval()方法

eval()函數(shù)可計(jì)算某一個(gè)字符串，并執(zhí)行其中的javascript代碼。

注意事項(xiàng)：IE8(兼容模式)，IE7和IE6也可以使用eval()方法將字符串轉(zhuǎn)成json對(duì)象，但是不推薦使用，因?yàn)檫@種方式不安全eval會(huì)執(zhí)行接送字符串的表達(dá)式.

9.假設(shè)有一個(gè)字符串a(chǎn)bcdefg,請(qǐng)將這個(gè)字符串倒序輸出

方法一：

方法二：

• split("")---根據(jù)字符串拆分?jǐn)?shù)組
• reverse()---數(shù)組反轉(zhuǎn)元素位置
• join("")數(shù)組轉(zhuǎn)回字符串，不帶分隔符

10.jquery獲取的DOM對(duì)象和原生的dom對(duì)象有何區(qū)別？

js原生獲取的dom是一個(gè)對(duì)象，jQuery對(duì)象就是一個(gè)數(shù)組對(duì)象，其實(shí)就是選擇出來(lái)的元素的數(shù)組集合，所以說(shuō)他們兩者是不同的對(duì)象類型不等價(jià)

• 原生DOM對(duì)象轉(zhuǎn)jQuery對(duì)象

• jQuery對(duì)象轉(zhuǎn)原生DOM對(duì)象

11.什么是vue生命周期？生命周期的作用是什么？

從一個(gè)組件創(chuàng)建、數(shù)據(jù)初始化、掛載、更新、銷毀，這就是生命周期。在組件中具體的方法有:beforeCreate 、created、beforeMount、mounted、beforeUpdate、updated、 beforeDestroy、destroyed

beforeCreat() 創(chuàng)建前 在new一個(gè)vue實(shí)例后，只有一些默認(rèn)的生命周期鉤子和默認(rèn)事件，其他的東西都還沒創(chuàng)建。在此生命周期執(zhí)行的時(shí)候，data和methods中的數(shù)據(jù)都還沒有初始化。不能在這個(gè)階段使用data中的數(shù)據(jù)和methods中的方法

created（）被創(chuàng)建 data 和 methods都已經(jīng)被初始化好了，可以調(diào)用了

beforeMount() 掛載前 在內(nèi)存中已經(jīng)編譯好了模板了，但是還沒有掛載到頁(yè)面中，此時(shí)，頁(yè)面還是舊的

mounted（）已掛載 Vue實(shí)例已經(jīng)初始化完成了。此時(shí)組件脫離了創(chuàng)建階段，進(jìn)入到了運(yùn)行階段。 如果我們想要通過(guò)插件操作頁(yè)面上的DOM節(jié)點(diǎn)，最早可以在和這個(gè)階段中進(jìn)行

beforeupdate（）更新前 頁(yè)面中的顯示的數(shù)據(jù)還是舊的，data中的數(shù)據(jù)是更新后的， 頁(yè)面還沒有和最新的數(shù)據(jù)保持同步

updated（）更新 頁(yè)面顯示的數(shù)據(jù)和data中的數(shù)據(jù)已經(jīng)保持同步了，都是最新的

beforeDestroy() 銷毀前 Vue實(shí)例從運(yùn)行階段進(jìn)入到了銷毀階段，這個(gè)時(shí)候上所有的 data 和 methods ， 指令， 過(guò)濾器 ……都是處于可用狀態(tài)。還沒有真正被銷毀

destroyed（）被銷毀 這個(gè)時(shí)候上所有的 data 和 methods ， 指令， 過(guò)濾器 ……都是處于不可用狀態(tài)。組件已經(jīng)被銷毀了。

12.promise是干什么的？

1、主要用于異步計(jì)算

2、可以將異步操作隊(duì)列化，按照期望的順序執(zhí)行，返回符合預(yù)期的結(jié)果

3、可以在對(duì)象之間傳遞和操作promise，幫助我們處理隊(duì)列

13.jq和props獲取參數(shù)有什么區(qū)別

jq參數(shù)會(huì)消失，props不會(huì)

attr() 方法設(shè)置或返回被選元素的屬性值。

prop() 方法設(shè)置或返回被選元素的屬性和值。

14.es6獲取變量var let const有什么區(qū)別？

1. var定義的變量，沒有塊的概念，可以跨塊訪問, 不能跨函數(shù)訪問。
2. let定義的變量，只能在塊作用域里訪問，不能跨塊訪問，也不能跨函數(shù)訪問。
3. const用來(lái)定義常量，使用時(shí)必須初始化(即必須賦值)，只能在塊作用域里訪問，而且不能修改。

15.ajax和axios區(qū)別？

ajax：

本身是針對(duì)MVC的編程,不符合現(xiàn)在前端MVVM的浪潮

基于原生的XHR開發(fā)，XHR本身的架構(gòu)不清晰，已經(jīng)有了fetch的替代方案

JQuery整個(gè)項(xiàng)目太大，單純使用ajax卻要引入整個(gè)JQuery非常的不合理（采取個(gè)性化打包的方案又不能享受CDN服務(wù)

axios：

從 node.js 創(chuàng)建 http 請(qǐng)求

支持 Promise API

客戶端支持防止CSRF

提供了一些并發(fā)請(qǐng)求的接口（重要，方便了很多的操作）

16.為什么要封裝axios

在項(xiàng)目的開發(fā)中有三個(gè)階段

1.開發(fā)環(huán)境(dev.abc.com)

2.測(cè)試環(huán)境(text.abc.com)

3.生產(chǎn)環(huán)境(abc.com)

訪問接口數(shù)據(jù)時(shí)，例如：商品接口會(huì)是【域名】/api/v1/products

當(dāng)環(huán)境不同時(shí)，直接修改域名就可。這就是封裝請(qǐng)求的原因。

17.父?jìng)髯樱觽鞲?/strong>

父組件向子組件傳值

1.創(chuàng)建子組件，在src/components/文件夾下新建一個(gè)Child.vue

2.Child.vue的中創(chuàng)建props，然后創(chuàng)建一個(gè)名為message的屬性

3.在App.vue中注冊(cè)Child組件，并在template中加入child標(biāo)簽，標(biāo)簽中添加message屬性并賦值

4.保存修改的文件，查看瀏覽器

5.我們依然可以對(duì)message的值進(jìn)行v-bind動(dòng)態(tài)綁定

父組件向子組件傳值成功

總結(jié)一下：

• 子組件在props中創(chuàng)建一個(gè)屬性，用以接收父組件傳過(guò)來(lái)的值
• 父組件中注冊(cè)子組件
• 在子組件標(biāo)簽中添加子組件props中創(chuàng)建的屬性
• 把需要傳給子組件的值賦給該屬性

子組件向父組件傳值

1.在子組件中創(chuàng)建一個(gè)按鈕，給按鈕綁定一個(gè)點(diǎn)擊事件

2.在響應(yīng)該點(diǎn)擊事件的函數(shù)中使用$emit來(lái)觸發(fā)一個(gè)自定義事件，并傳遞一個(gè)參數(shù)

3.在父組件中的子標(biāo)簽中監(jiān)聽該自定義事件并添加一個(gè)響應(yīng)該事件的處理方法

子組件向父組件傳值成功

總結(jié)一下：

1.子組件中需要以某種方式例如點(diǎn)擊事件的方法來(lái)觸發(fā)一個(gè)自定義事件

2.將需要傳的值作為$emit的第二個(gè)參數(shù)，該值將作為實(shí)參傳給響應(yīng)自定義事件的方法

3.在父組件中注冊(cè)子組件并在子組件標(biāo)簽上綁定對(duì)自定義事件的監(jiān)聽