面試題集合

1、v-model是什麼？ vue中標籤怎麼繫結事件？

答：v-model這個指令只能用在表單元素上，可以用他進行雙向資料繫結。繫結事件：<input @click=doLog() />

2、mvvm框架是什麼？說說對雙向資料繫結的理解？它和其它框架（jquery）的區別是什麼？哪些場景適合？

答：mvvm的m模型就是用來定義驅動的資料、v經過資料改變後的html、vm就是連線資料和檢視，用來實現雙向繫結

雙向繫結:一個變了另外一個跟著變了，例如：檢視一個綁定了模型的節點有變化，模型對應的值會跟著變

區別：vue資料驅動，通過資料來顯示檢視層而不是節點操作。

場景：資料操作比較多的場景，更加便捷

3、自定義指令的方法有哪些？它有哪些鉤子函式？還有哪些鉤子函式引數？

答：全域性定義指令：在vue物件的directive方法裡面有兩個引數，一個是指令名稱，另外一個是函式。元件內定義指令（區域性定義指令）：directives

鉤子函式：bind（繫結事件觸發）、inserted(節點插入的時候觸發)、update（元件內相關更新）、componentUpdated（被繫結元素所在模板完成一次更新週期時呼叫）、unbind（只調用一次，指令與元素解綁時呼叫）

鉤子函式引數：el、binding

4、說出至少4種vue當中的指令和它的用法？

答：v-if：判斷是否隱藏；v-for：資料迴圈出來；v-bind:class：繫結一個屬性；v-model：實現雙向繫結

5、請詳細說下你對vue生命週期的理解？

總共分為8個階段建立前/後，載入前/後，更新前/後，銷燬前/後。

建立前/後： 在beforeCreated階段，vue例項的掛載元素$el和資料物件data都為undefined，還未初始化。在created階段，vue例項的資料物件data有了，$el還沒有。

載入前/後：在beforeMount階段，vue例項的$el和data都初始化了，但還是掛載之前為虛擬的dom節點，data.message還未替換。在mounted階段，vue例項掛載完成，data.message成功渲染。

更新前/後：當data變化時，會觸發beforeUpdate和updated方法。

銷燬前

6、請說下 vue 元件的優點，以及註冊使用的過程？

答：首先，元件可以提升整個專案的開發效率。能夠把頁面抽象成多個相對獨立的模組，解決了我們傳統專案開發：效率低、難維護、複用性等問題。

使用Vue.component方法註冊元件。子元件需要資料，可以在props中接受定義。而子元件修改好資料後，想把資料傳遞給父元件。可以採用emit方法。

7、Vue.js內建的指令，用什麼開頭？

v-開頭的

8、CSS隱藏元素的幾種方法？說出他們的區別

display：none  不佔據物理位置

visibility:hidden  佔據物理位置

opacity:0 透明度為0，佔物理位置

9、CSS清除浮動的幾種方法（至少兩種）

使用帶clear屬性的空元素

使用CSS的overflow屬性；

使用CSS的:after偽元素 (用於非IE瀏覽器)；

10、例舉3種強制型別轉換?

強制parseInt,parseFloat,number

11、陣列操作pop()push()  shift()unshift() 有什麼區別?

Push()尾部新增   pop()尾部刪除

Unshift()頭部新增    shift()頭部刪除

12、提交表單，有幾種方式

submit提交，Ajax提交form表單

13、定義一個div，讓其在頁面中，垂直居中顯示

.box{  

position:absolute;  

top:50%;  

left:50%;  

width:500px;  

height:200px;

margin-left:-250px;

margin-top:-100px;

background:red;

}

14、active-class是哪個元件的屬性？巢狀路由怎麼定義？

答：vue-router模組的router-link元件。children陣列來定義子路由

15、怎麼定義vue-router的動態路由？怎麼獲取傳過來的動態引數？

答：在router目錄下的index.js檔案中，對path屬性加上/:id。  使用router物件的params.id

16、vue-router有哪幾種導航鉤子？

答：三種，一種是全域性導航鉤子：router.beforeEach(to,from,next)，

作用：跳轉前進行判斷攔截。第二種：元件內的鉤子；第三種：單獨路由獨享元件

17、vue-router是什麼？它有哪些元件？

答：vue用來寫路由一個外掛。router-link、router-view

18、你是怎麼認識vuex的？

答：vuex可以理解為一種狀態管理的開發模式或者框架，data中的屬性需要共享給其他vue元件使用。狀態為state集中放在store中； 改變狀態的方式是提交mutations，這是個同步的事物； 非同步邏輯應該封裝在action中。

19、vuex有哪幾種屬性？

答：有五種，分別是 State、 Getter、Mutation 、Action、 Module

state => 基本資料(資料來源存放地)getters => 從基本資料派生出來的資料 mutations => 提交更改資料的方法，同步！ actions => 像一個裝飾器，包裹mutations，使之可以非同步。 modules => 模組化Vuex

20、5、Vue.js中ajax請求程式碼應該寫在元件的methods中還是vuex的actions中？

如果請求來的資料是不是要被其他元件公用，僅僅在請求的元件內使用，就不需要放入vuex 的state裡。

如果被其他地方複用，這個很大機率上是需要的，如果需要，請將請求放入action裡，方便複用

21、axios是什麼？怎麼使用？

答：請求後臺資源的模組。npm install axios --save裝好，

js中使用import進來，然後.get或.post。返回在.then函式中如果成功，失敗則是在.catch函式中

22、axios+tp5進階中，呼叫axios.post(‘api/user’)是進行的什麼操作？axios.put(‘api/user/8′)呢？

答：新增使用者操作，更新操作。

23、什麼是RESTful API？怎麼使用?

答：是一個api的標準，無狀態請求。請求的路由地址是固定的，

如果是tp5則先路由配置中把資源路由配置好。標準有：.get  .post.put.delete

24、vuex是什麼？怎麼使用？哪種功能場景使用它？

答：vue框架中狀態管理。在main.js引入store，注入。

新建了一個目錄store.js，….. export 。

場景有：單頁應用中，元件之間的狀態。音樂播放、登入狀態、加入購物車

25、什麼是webpack? vue-loader是什麼？使用它的用途有哪些？

答：WebPack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Scss，TypeScript等），並將其轉換和打包為合適的格式供瀏覽器使用。

解析.vue檔案的一個載入器，將template/js/style轉換成js模組。

用途：js可以寫es6、style樣式可以scss或less、template可以加jade等

26、說幾個ajax返回error的原因

答：1、dataType錯誤

型別錯誤：後臺返回的dataType型別和前臺寫的不一致會跳入error

格式錯誤：jquery1.4之後對json的格式要求非常嚴格，json格式錯誤也會跳入error

2、data不能不寫

data為空也一定要傳"{}"；不然返回的是xml格式的。

3.、傳遞的引數

必須是ajax支援的編碼格式

4、 URL路徑問題

路徑不能有中文

27、XMLHttpRequest：XMLHttpRequest.readyState: 狀態碼的意思

0 － （未初始化）還沒有呼叫send()方法

1 － （載入）已呼叫send()方法，正在傳送請求

2 － （載入完成）send()方法執行完成，已經接收到全部響應內容

3 － （互動）正在解析響應內容

4 － （完成）響應內容解析完成，可以在客戶端呼叫了

28、請說出vue.cli專案中src目錄每個資料夾和檔案的用法？

答：assets資料夾是放靜態資源；components是放元件；router是定義路由相關的配置; app.vue是一個應用主元件；main.js是入口檔案

29、vue.cli中怎樣使用自定義的元件？有遇到過哪些問題嗎？

答：第一步：在components目錄新建你的元件檔案（smithButton.vue），script一定要export default {

第二步：在需要用的頁面（元件）中匯入：importsmithButton from ‘../components/smithButton.vue’

第三步：注入到vue的子元件的components屬性上面,components:{smithButton}

第四步：在template檢視view中使用，<smith-button>  </smith-button>

問題有：smithButton命名，使用的時候則smith-button。

30、使用過element.ui嗎？說下它其中兩個元件的使用方法？

答：使用過；用過一個佈局的，它是由24份，它的寫法是:span後面帶的數字它佔24份裡面的寬度。:offset是它的間距，後面也是跟數字，也是從24份裡面取的。

input按鈕，標籤是el-input，後面type跟上一個屬性就是顯示不同按鈕的型別，有預設的default（預設的）、success（成功的）、warning（警告）、danger（危險）、info（）、primary（）

31、你覺得哪些專案適合vue框架？

答：1、資料資訊量比較多的。

2、手機web和app應用多端共用一套介面的專案，因為使用vue.cli+webpack後的前端目錄，非常有利於專案的跨平臺部署。

32、PC端專案你會在哪些場景使用Vue框架？那麼vue為什麼解決這些問題呢？

答：上萬級資料需要瀑布流更新和搜尋的時候，因為資料龐大的時候，用原生的dom操作js和html都會有列表的html佈局，迭代很困難。再一個dom節點的大面積新增會影響效能。

第一：只需用v-for在view層一個地方遍歷資料即可。

第二：vue通過Virtual Dom就是在js中模擬DOM物件樹來優化DOM操作。

33、call（） 和 apply（） 的作用和區別？

答：呼叫一個物件的一個方法，用另一個物件替換當前物件。

例：blackCat.say.call(whiteDog)

區別：call(thisObj，arg1,arg2)

Apply(thisObj，[arg1,arg2])

34、舉例說ES6有哪些的新功能？

35、ajax請求的時候get 和post方式的區別

Get 一般用於獲取資訊

    使用URL傳遞引數

    對所傳送的資訊數量也有限制，一般在2000字元

Post 一般用於修改伺服器資源（新建，或者 修改）

對所傳送的資訊數量無限制

36、JavaScript中如何檢測一個變數是一個String型別？請寫出函式實現

function(obj) {  

return typeof(obj) == “string”;

}

37、JSON 的瞭解？
JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。它是基於JavaScript的一個子集。資料格式簡單, 易於讀寫, 佔用頻寬小。
格式：採用鍵值對，例如：{'age':'12', 'name':'back'}

38、如何阻止事件冒泡和預設事件

阻止事件冒泡：event.stopPropagation();

阻止預設事件：event.preventDefault();

以上兩個都可以用returnfalse代替

39、Ajax資料格式

文字、HTML、XML 或 JSON

40、window.load和$(document).ready()的區別

前者必須在網頁中所有元素（元素關聯的檔案），全部載入到瀏覽器以後，js才可以訪問網頁中的任何元素， 全等於===  $(window).load()

後者是Dom就緒就可以訪問，但並不意味著，元素所有的關聯檔案已經下載完畢。

41、響應式css定義

@media screen (條件1) and (條件二)

例如：@media screen (min-width:768px) and (max-width:979px)

42、$this 和this區別

this，表示當前的上下文物件是一個html物件，可以呼叫html物件所擁有的屬性和方法。$(this),代表的上下文物件是一個jquery的上下文物件，可以呼叫jquery的方法和屬性值。

43、你有哪些效能優化的方法？
把CSS樣式表置於頂部
把JS指令碼置於頁面底部
避免使用 CSS 表示式（Expression）
使用外部 JavaScript 和 CSS
削減 JavaScript 和 CSS
用 <link> 代替 @import
剔除重複指令碼
減少DOM訪問

優化影象（背景圖片，用css定位，圖片全部儲存在一張PNG8格式上）
favicon.ico要小而且可快取

44、ajax請求時，如何解析json資料

使用eval parse,鑑於安全性考慮 使用parse更靠譜

JSON.parse(jsonstr); //可以將JSON字串反序列化成JSON物件

JSON.stringify(jsonobj); //可以將JSON物件序列化成JSON對符串 

45、使用CSS實現三欄自適應佈局（兩邊寬度固定，中間自適應）

1. <divid = "box">

2. <divid = "left_box"></div>

3. <divid = "center_box"></div>

4. <divid = "right_box"></div>

5. </div>

6. 

7. #box{width:100%;display: flex; height: 100px; }  

8. #left_box,#right_box{width: 200px;height: 100px;  }  

9. #center_box{ flex:1;height: 100px; }  

46、CSS3中各個瀏覽器核心相容的設定

1. -moz-：代表FireFox瀏覽器私有屬性  

2. -ms-：代表IE瀏覽器私有屬性  

3. -webkit-：代表safari、chrome瀏覽器私有屬性  

4. -o-：代表opera瀏覽器私有屬性  

IE9以下的瀏覽器不支援HTML5標籤，所以需要匯入一個html5.js補丁，原理是通過JS來生成HTML5新標籤物件。

因為本著移動優先的原則，現在寫CSS都會用media query（響應式設計），IE8以下的瀏覽器不支援media query，這會導致@media 宣告的CSS不能生效，因此要匯入一個css3-mediaqueries.js補丁。

如下：

<!--[if lte IE 8]>

        <script src="/js/html5.js"></script>

        <script src="/js/css3-mediaqueries.js"></script>

        <link href="/css/ie8.css" rel="stylesheet" type="text/css">

<![endif]-->

/* 因為條件註釋只對IE10以下版本有效（IE11已經取消支援），所以在其他現代瀏覽器裡面會自動忽略，不會載入，因此不會有效能問題 */

/* 因為IE9以下瀏覽器不支援CSS3，IE9支援一部分，因此不能顯示一些CSS3的過渡效果，對此有兩種辦法，一種是忽略，也就是降級或者是差異化設計。

或者可以用jquery的動畫替代，引入方法可以是條件註釋，也可以通過檢測Navigator來判斷IE版本 */

47、什麼是層疊順序

諸如border/background一般為裝飾屬性，而浮動和塊狀元素一般用作佈局，而內聯元素都是內容。網頁中最重要的是什麼？當然是內容

48、三角形的繪製

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

49、CSS3有哪些新特性？

CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），
對文字加特效（text-shadow），線性漸變（gradient），變換（transform）

Transform： rotate(9deg) //旋轉

scale(0.85,0.90) //縮放

translate(0px,-30px) //定位

skew(-9deg,0deg) //傾斜

50、什麼是響應式設計？

它是關於網頁製作的過程中讓不同的裝置有不同的尺寸和不同的功能。響應式設計是讓所有的人能在這些裝置上讓網站執行正常

51、寫一段css3動畫，在5s內，div背景色從red變為blue

div

{

width:100px;

height:100px;

background:red;

animation:myfirst 5s;

}

@keyframes myfirst

{

from {background:red;}

to {background:yellow;}

}

52、Bootstrap的特性

響應式設計

柵格佈局

完整的類庫

jQuery外掛

注意：因為這裡要使用大量的html5和css3,所以對瀏覽器有要求，IE必須9以上。

53、什麼是boostrap

Bootstrap是基於html、css、javascript的前端框架，為實現應用程式迅速開發的一套前端框架包

54、div+css的佈局較table佈局有什麼優點？

改版的時候更方便 只要改css檔案。頁面載入速度更快、結構化清晰、頁面顯示簡潔。表現與結構相分離。易於優化（seo）搜尋引擎更友好，排名更容易靠前。

55、一個頁面上有大量的圖片（大型電商網站），載入很慢，你有哪些方法優化這些圖片的載入，給使用者更好的體驗。

1、圖片懶載入，在頁面上的未可視區域可以新增一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小於後者，優先載入。

2、如果為幻燈片、相簿等，可以使用圖片預載入技術，將當前展示圖片的前一張和後一張優先下載。

3、如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術。

4、如果圖片過大，可以使用特殊編碼的圖片，載入時會先載入一張壓縮的特別厲害的縮圖，以提高使用者體驗。

5、如果圖片展示區域小於圖片的真實大小，則因在伺服器端根據業務需要先行進行圖片壓縮，圖片壓縮後大小與展示一致。 

55、CSS3新增偽類有那些？

 p:first-of-type 指定父元素的首個 p 元素。

 p:last-of-type  指定父元素的最後一個 p 元素。

 p:only-of-type屬於父元素的特定型別的唯一子元素的每個 p 元素。

p:only-child    選擇屬於其父元素的唯一子元素的每個 <p> 元素。

p:nth-child(2)  選擇屬於其父元素的第二個子元素的每個 <p> 元素。

 :enabled、:disabled 控制表單控制元件的禁用狀態。

:checked，單選框或複選框被選中。

56、Cookie, LocalStorage 與 SessionStorage三者的異同

57、高度坍塌產生的原因？如何解決？

父元素的高度預設是被子元素撐開的，也就是子元素多高，父元素就多高。但是當為子元素設定浮動以後，子元素會完全脫離文件流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。

overflow: hidden;

58、http狀態碼

200 - 請求成功

301 - 資源（網頁等）被永久轉移到其它URL

404 - 請求的資源（網頁等）不存在

500 - 內部伺服器錯誤

59、px和em，rem的區別

px是一個絕對字型大小，em是根據其父元素的字型大小來設定，1em=16px。那麼12px=0.75em, 10px=0.625em，但是用em計算相對複雜；CSS3提供了rem，它也是個相對單位，rem只相對跟節點<html>計算，適用於響應式頁面  

1. html{  

2.     font-size:62.5%; /* 10÷16=62.5% */  

3. }  

4. body{  

5.     font-size:12px;  

6.     font-size:1.2rem ; /* 12÷10=1.2 */  

7. } 

60、div垂直居中

<styletype="text/css"rel="stylesheet">

.table {

display: table;

margin: 5px;

width: 500px;

height: 300px;

background-color: #ccc;

        }

.cell {

display: table-cell;

padding: 10px;

vertical-align: middle;

/*該屬性是定義行內元素垂直對齊的，只有行內元素會生效。在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。*/

        }

</style>

<divclass="table">

<divclass="cell">內容內容內容內容內容內內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>

</div>

61、html5有哪些新特性？如何區分 HTML 和 HTML5？
HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。
(1)繪畫 canvas;
(2)用於媒介回放的 video 和 audio 元素;
(3)本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;
(4)sessionStorage 的資料在瀏覽器關閉後自動刪除;
(5)語意化更好的內容元素，比如 article、footer、header、nav、section;
(6)表單控制元件，calendar、date、time、email、url、search;

區別：<!DOCTYPE html>

62、CSS選擇符CSS選擇符有哪些？

標籤選擇符  類選擇符 id選擇符  屬性選擇符包含選擇符

63、如何消除一個數組裡面重復的元素？