㈠ 請問前端開發中，PC電腦常見的尺寸有哪些
1920px
1400px
1200px
800px
具體需要看設計師的設計稿
㈡ 前端布局————長度比例
這是一些不太惹人注意的知識，但是掌握了他會對你的前端不具有很大幫助。
在前端布局時，我們將長度單位分為兩種，一種是絕對單位，一種是相對單位。
上述這些就是絕對單位，這些單位在現實中有絕對定義，不會隨著你的布局平台大小比例變化而變化 （ps：1inch = 2.54cm）
沒錯，你沒有看錯，px是一個相對單位，px是Pixel的縮寫,代表的是圖像上最小的一個點的大小，他會因為圖像大小的不同而改變， 比如1024x1024的一張圖，當他的長寬擴大一倍，而解析度不變（即1024x1024），那麼他的每個像素的大小都將擴大一倍
通常我們所指的4.5寸、5,0寸這些手機屏幕的大小指的是手機屏幕對角線的距離 （只包括可顯示部分，邊框部分不包括）
我們在開發移動設備的網站時，最常見的的一個動作就是把下面這個東西復制到我們的head標簽中：↓↓↓
該meta標簽的作用是讓當前viewport的寬度等於設備的寬度， 同時不允許用戶手動縮放
（ps：移動端下定寬寫法：viewport width=定值（設計稿寬），我們不設置縮放相關屬性，移動端瀏覽器會自動縮放頁面以適配屏幕）
rem 和 em 單位是由瀏覽器基於你的設計中的字體大小計算得到的像素值。em 單位基於使用他們的元素的字體大小。rem 單位基於 html 元素的字體大小。em 單位可能受任何繼承的父元素字體大小影響。rem 單位可以從瀏覽器字體設置中繼承字體大小。
（ps：一般情況下，不要給字體大小用rem）
㈢ px em rem fr 前端單位的區別
一、 px 全稱是pixel(像素)，相對長度單位，相對於屏幕解析度而言的。
特點：IE無法調整使用px作為單位的字體大小；
二、em是基於基數來計算出來的相對字體大小
特點：①em是相對長度單位，相對於當前對象內文本的字體尺寸。如果當前對象文本大小未設定，則相對於瀏覽器的默認字體尺寸。
② em的值不是固定的；
③ em會繼承父級元素的字體大小；
根據以上特點我們知道em單位轉換為像素值，大小取決於自身父級元素所設置的px值大小。父級元素字體大小乘以em的值。
三、rem是css3新增的屬性，也是一個相對單位
特點：rem只相對於HTML根元素，所以通過rem既可以設定頁面根元素就成比例的調整所有字體的大小，有可以避免字體大小逐層復合的連鎖反應。
如：瀏覽器默認的字型大小16px，那麼，
| px | rem |
| 12 | 12/16 = .75 |
| 14 | 14/16 = .875 |
| 16 | 16/16 = 1 |
| 18 | 18/16 = 1.125 |
| 20 | 20/16 = 1.25 |
| 24 | 24/16 = 1.5 |
| 30 | 30/16 = 1.875 |
| 36 | 36/16 = 2.25 |
| 42 | 42/16 = 2.625 |
| 48 | 48/16 = 3 |
四、fr是自適應單位，fr單位被用在一系列長度值中分配剩餘空間，如果多個已指定多個部分，則剩下的空間根據各自數字按比例分配。
（另外，vh，vw也是css3新增屬性，分別是相對於視口的高度和寬度，視口被分為100等分）
㈣ web前端筆試題(HTML/CSS篇)
web前端筆試題集錦(HTML/CSS篇)
導讀：網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟體化的交互形式為用戶提供了更好的使用體驗，這些都是基於前端技術實現的。以下是由我J.L為您整理推薦的前端開發筆試題目，歡迎參考閱讀。
一、HTML/CSS
1，讓一個input的背景顏色變成紅色
2，div的高寬等於瀏覽器可見區域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個可見區域
思路：
(1)先放置一個div1，浮動：position:absolute;top:0px;left:0px;
(2)再放置一個div2，浮動：position:absolute;top:0px;left:0px;width:100%;height:100%;
(3)在div2中放置一個div3，令其高度超過瀏覽器高度，使div2產生滾動條
(4)對html,body進行樣式設置：width:100%;height:100%;overflow:hidden->不讓瀏覽器產生滾動條，避免頁面出現兩個滾動條
(5)編寫JavaScript，另div2的高度等於頁面可見高度，寬度等於頁面可見寬度，注意，在計算完可見高度height和可見寬度width後，要對這兩個值做處理，可見寬度-div2的滾動條的寬度，滾動條的寬度我這里假設是20px
這樣題目基本就完成了，不過瀏覽器的兼容性還不是很好。
3，IE、FF下面CSS的解釋區別
(1) 讓頁面元素居中
ff{margin-left:0px;margin-right:0px;width:***}
ie上面的設置+text-align:center
(2) ff：不支持濾鏡
ie：支持濾鏡
(3) ff：支持!important
ie支持*，ie6支持_
(4) min-width,min-height
FF支持，IE不支持，IE可以用css expression來替代
(5) Css Expression
FF不支持，IE支持
(6) cursor：hand
IE下可以顯示手指狀，FF下不行
(7) UL的默認padding和margin
IE下ul默認有margin，FF下ul默認有padding
(8) FORM的默認margin
IE下FORM有默認margin，FF下margin默認為0
4，一個定寬元素在瀏覽器(IE6，IE7，Firefox)中橫向居中對齊的布局，請寫出主要的.HTML標簽及CSS
思路：
IE6/7：text-align:center
Firefox：margin:0 auto(margin-top和margin-bottom也可以為其他數字，關鍵是margin-left,margin-right為auto)
5，CSS中margin和padding的區別
margin是元素的外邊框，是元素邊框和相鄰元素的距離
Padding是元素的內邊框，是元素邊框和子元素的距離
6，最後一個問題是，如何製作一個combo選項，就是可以輸入可以下拉菜單選擇。
思路：
(1)布局select和input，讓input覆蓋select，除了select的下拉圖標，以方便select選擇
(2)編寫JS，為select添加onchange事件，onchange時將input的value置成select選中的指
7，
中alt和tittle的區別
alt：圖片顯示不出來了就提示alt
title：滑鼠劃過圖片顯示的提示
8，用css、html編寫一個兩列布局的網頁，要求右側寬度為200px，左側自動擴展。
在這里我使用了兩種方式：
(1)使用position
HTML:
left
right
(2) 使用float
HTML:
固定寬度
自適應
二者的CSS公用，如下：
html,body{width:100%;height:100%;margin:0px;padding:0px;}
.container {width:100%;height:400px;position:relative;}
.fl1 {float:left;}
.left {width:100%;height:400px;background:#AFFFD0;position:absolute;}
.right {width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;}
.clear {clear:both;overflow:hidden;height:0px;}
.container2 {width:100%;height:400px;margin-top:100px;}
.left2 {background:#afffd0;height:400px;width:200px;margin-right:-3px;}
.right2 {height:400px;background:#f9afff;}
9，解釋document.getElementByIdx_x_x_x("ElementID").style.fontSize="1.5em"
em是相對長度單位，相當於當前對象內文本的字體尺寸，如果當前行內文本的字體尺寸未被指定，則相對於瀏覽器的默認字體尺寸。
該語句將id為ElementID的元素的字體設置為當前對象內文本的字體尺寸的1.5倍
10，Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? 行內元素有哪些?塊級元素有哪些?CSS的盒模型?
DOCTYPE是文檔類型，用來說明使用的HTML或者XHTML是什麼版本，其中的DTD叫文檔類型定義，裡麵包含了文檔規則，瀏覽器根據定義的DTD來解析頁面的標識並展現出來
DOCTYPE有兩種用途：一個可以進行頁面的有效性驗證，另一個可以區分瀏覽器使用嚴格模式還是混雜模式來解析CSS。
嚴格模式和混雜模式是瀏覽器解析CSS的兩種模式，目前使用的大部分瀏覽器對這兩種模式都支持，但是IE5隻支持混雜模式。
可那個過DOCTYPE聲明來判斷哪種模式被觸發
(1) 沒有DOCTYPE聲明的網頁採用混雜模式解析
(2) 對使用DOCTYPE聲明的網頁視不同瀏覽器進行解析
(3) 對於瀏覽器不能識別的DOCTYPE聲明，瀏覽器採用嚴格模式解析
(4) 在ie6下，如果在DOCTYPE聲明之前有一個xml聲明比如
，採用混雜模式解析，在IE7，IE8中這條規則不生效。
(5) 在ie下，如果DOCTYPE之前有任何字元，都會導致它進入混雜模式，如：
區分這兩種模式可以理解瀏覽器解析CSS的區別，主要是在盒模式的解釋上。
常見的塊級元素有：DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等
常見的內聯元素：SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等
CSS盒模型用於描述為一個HTML元素形成的矩形盒子，盒模型還涉及元素的外邊距，內邊距，邊框和內容，具體來講最裡面的內容是元素內容，直接包圍元素內容的是內邊距，包圍內邊距的是邊框，包圍邊框的是外邊距。內邊距，外邊距，邊框默認為0。
11，CSS引入的方式有哪些? link和@import的區別?
引入css的方式有下面四種
(1) 使用style屬性
(2) 使用style標簽
(3) 使用link標簽
(4) 使用@import引入
Link和@import區別：
(1) link屬於XHTML標簽，@import是CSS提供的一種方式。Link除了載入CSS外，還可以做很多事情，如定義RSS，rel連接屬性等;@import只能載入CSS
(2)載入順序不同，當頁面被載入的時候，link載入的CSS隨之載入，而@import引用的CSS會等到頁面完全下載完之後才會載入
(3)兼容性差別，由於@import是CSS2.1提出的，所以老的瀏覽器不支持，IE系列的瀏覽器IE5以上才能識別，而link沒有這個問題
使用DOM控制樣式的差別，使用JavaScript控制DOM去改變樣式的時候，只能操作link，@import不可以被DOM操作。
12，如何居中一個浮動元素?
一個浮動元素裡麵包含的元素可以水平居中，原理如下：
讓浮動元素left相對於父元素container右移50%，浮動元素left的子元素left-child相對於left左移50%就可以實現left-child相對於container水平居中
垂直居中類似，不過操作的不是left而是top
13，HTML5和CSS3的了解情況
有所了解
HTML5和CSS3分別是新推出的HTML和CSS規范，前世是XHTML2和CSS2，目前還在草案階段，不過得到了Apple，Opera，Mozilla，Google，Microsoft不同程度的支持，也開發出了不少基於他們的應用。
HTML5相對於原來的HTML規范有一些變化：
(1)DOCTYPE更簡潔
(2)新增了一些語義化標簽，如article,header,footer,dialog等
(3)新增了一些高級標簽，如,,
CSS3相對於CSS2也新增了不少功能
(1) 選擇器更加豐富
(2) 支持為元素設置陰影
(3) 無需圖片能提供圓角
14，你怎麼來實現下面這個設計圖
(1) 切圖
(2) 布局，採用兩欄布局，分別左浮動
(3) 編寫css代碼
15，css 中id和class如何定義,哪個定義的優先順序別高?
id：#***，***為HTML中定義的id屬性
class:.***，***為HTML中定義的class屬性
id比class的優先順序高
16，用html實現如下表格(不如嵌套實用表格)
三行三列,其中第一行第一列和第二行第一列合並; 第二行第二列和第二行第三列合並(現場畫表)
運行結果如下：
17，web標准網站有那些優點
(1) Web標准網站結構和布局分離，使網站的訪問和維護更加容易
(2) Web標准網站結構，布局以及頁面訪問都標准化，使網站能在更多的web標准設備中訪問，兼容性更好
(3) Web標准網站語義化更好，語義化的XHTML不僅對用戶友好，對搜索引擎也友好。
;㈤ 前端是什麼
前端也稱web前端，web前端即為網站的前端開發，前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。
web前端開發通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互。它從網頁製作演變而來，名稱上有很明顯的時代特徵。網頁製作是Web1.0時代的產物，早期網站主要內容都是靜態，以圖片和文字為主，用戶使用網站的行為也以瀏覽為主。
隨著互聯網技術的發展和HTML5、CSS3的應用，現代網頁更加美觀，交互效果顯著，功能更加強大。Web前端主要是用來開發用戶通過瀏覽器可以瀏覽和使用的Web頁面的。 一般而言，所涉及的內容主要包括W3C中的HTML、CSS和JavaScript這三方面的內容。
㈥ 移動端界面前端開發字型大小，間距等都是用什麼單位比較好
rem是相對於根元素的，在根元素寫好font-size下面的寬高間距，就可以方便的使用 並且兼容性很不錯
㈦ Web前端企業面試題
答：
一、display和visibility的相同與不同點
1、相同點：display和visibility都有講元素隱藏的意思
2、不同點：display是元素隱藏，隱藏的元素不佔文檔流
而visibility隱藏的元素仍然占文檔流
二、display和visibility的屬性值
1、display
2、visibility
答：
在開發過程中經常需要循環遍歷數組或者對象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他們的異同點
for循環
其實除了這三種方法以外還有一種最原始的遍歷，自Javascript誕生起就一直用的 就是for循環，它用來遍歷數組
for循環中可以使用return、break等來中斷循環
結果：
forEach
對數組的每一個元素執行一次提供的函數（不能使用return、break等中斷循環），不改變原數組，無返回值undefined。
輸出結果：
for…in
循環遍歷的值都是數據結構的鍵值
總結一句: for in也可以循環數組但是特別適合遍歷對象
結果：
for…of
它是ES6中新增加的語法，用來循環獲取一對鍵值對中的值
循環一個數組
循環一個普通對象（報錯）
答：
px：像素（Pixel）,相對長度單位。像素px是相對於顯示器屏幕解析度而言的 。--即解析度不同的機型當前對應的距離可能發生變化。(1Inches=xPx)。
所以相對於同一機型來說是一個絕對的長度單位。
em：是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸 。
以其父級元素為基準來變化長度。所以其演算法不是一個固定的值。
rem：是CSS3新增的一個相對單位（root em，根em） 。
那麼其好用在用可以直接設置HTML的font-size，然後在其子類都是以這個大小為基準變化的值。
在移動設備上，我們常常設置
此方式的目的是為了將當前屏幕(PC)解析度的px轉化成手機端的px，讓px在手機上能夠兼容此方式。
因此，此時看見的12px與PC端的12px無異。但是，如果不寫著個meta的話，那麼，瀏覽器會一直以PC的視圖來決定手機端的px的大小，讓視圖看起來變小了很多。
那麼，響應式頁面則經常配合媒體查詢media 來設置不同解析度下手機的各種不同的配置機構，然後根據父級來變化所有的相對長度。
基礎篇
1.shift
// 刪除原數組的第一項，並返回刪除元素的值，如果數組為空則返回undefined
2.unshift
// 將參數添加到原數組開頭，並返回數組的長度
//註：此方法在ie6.0下
// 測試的返回值始終為undefined，在firefox下測試的返回值為7，所以此方法不可靠
// 一般需要用返回值時可用splice代替
3.pop
// 刪除原數組的最後一項，並返回刪除元素的值；如果數組為空則返回undefined
4.push
// 將參數添加到原數組末尾，並返回數組的長度
5.concat
// 返回一個新數組，是將參數添加到原數組中構成的
6.splice
7.reverse
8.sort(orderfunction)
9.slice(start,end)
10.join(separator)
11.indexOf
12.lastIndexOf
13. Array.isArray()
14. Array.toString()
進階篇
1.forEach
是最為常用的情景，它至於遍歷，可以在獲取當前數據項的前提下，對數據進行修改。它沒有返回值。理解起來也是最容易的。
2.map
map的本意就是映射，也就是將一個值從一種形式映射到另一種形式，比如將key映射到value。它的每一次遍歷都會有一個返回值。這些返回值組合成最終的結果數組。事實就是如此
forEach和map對比
相同點
1）都是循環遍歷數組中的每一項；
2）forEach()和map()匿名函數的參數相同，參數分別是item（當前每一項）、index（索引值）、arr（原數組）；
3）this都是指向調用方法的數組；
4) 只能遍歷數組；
不相同點
1）map()創建了新數組，不改變原數組；forEach()可以改變原數組。
2）遇到空缺的時候map()雖然會跳過，但保留空缺；forEach()遍歷時跳過空缺，不保留空缺。
3）map()按照原始數組元素順序依次處理元素；forEach()遍歷數組的每個元素，將元素傳給回調函數。
3.filter
它致力於從已有的數組中篩選出符合一定條件的數據項，最後的返回值是所有符合條件的數據項構成的數組。它不會修改原來的數組。記住，它的立足點就是篩選。也僅僅是篩選。還有一點需要注意：每一次遍歷都會有一個返回值，它的類型是布爾類型。返回值只有是true，當前遍歷項才會被篩選中。不要試圖在filter中去修改原始數組。
理解: 就是在一堆數據裡面去篩選你需要的數據 或者 剔除你不需要的數據
4.find()
返回通過測試的數組的第一個元素的值,
理解:假如你去一個一群人的地方去找人 你說我找xxb 他要是在那裡就找到 不在那裡就是undefined
在第一次調用 callback 函數時會確定元素的索引范圍，因此在 find 方法開始執行之後添加到數組的新元素將不會被 callback 函數訪問到。如果數組中一個尚未被callback函數訪問到的元素的值被callback函數所改變，那麼當callback函數訪問到它時，它的值是將是根據它在數組中的索引所訪問到的當前值。被刪除的元素仍舊會被訪問到。
語法
array.find(function(value, index, arr),thisValue)
value:必須，代表當前元素，其他四個參數都是可選，index代表當前索引值，arr代表當前的數組，thisValue代表傳遞給函數的值，一般用this值，如果這個參數為空，undefined會傳遞給this值
返回值：返回符合測試條件的第一個數組元素的值，如果沒有符合條件的則返回undefined。
擴展: findIndex()方法的用法與find()方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。自己try吧
5.every
理解: 這個就像 上課了 老師說 昨天布置的作業 只要有一個人沒有寫完 今天就不講課 然後挨個檢查 當檢查到有一個沒有寫完的時候 就不檢查了 返回 不講課了(false)
6.some
理解: 相當於在一個數組裡面找你想要的那個數 找到了 就返回true 找不到就返回false
7.rece
它這個方法是接收一個函數作為累加器,將數組中的值(從左向右)開始合並,最總為一個值 然後返回出來,callback
他可以傳四個參數:
1,previousValue:上一次調用回調返回的值,或者是提供的初始值(initialValue)
2,currentValue:數組中當前被處理的元素
3,index:不啰嗦,自己顧名思義去吧
4,array:返回調用rece的數組
彩蛋: 這里附上前幾天某某人比較喜歡的切割字元串的方法
substring() 和 substr()
相同點： 如果只是寫一個參數，兩者的作用都一樣：都是是截取字元串從當前下標以後直到字元串最後的字元串片段。
不同點： 第二個參數
substr(startIndex, lenth) // 第二個參數是截取字元串的長度（從起始點截取某個長度的字元串）；
substring(startIndex, endIndex) // 第二個參數是截取字元串最終的下標 （截取2個位置之間的字元串,『含頭不含尾'）。
1：在使用vue框架的過程中，我們經常需要給一些數據做一些初始化處理，這時候我們常用的就是在created與mounted選項中作出處理。
首先來看下官方解釋，官方解釋說created是在實例創建完成後唄立即調用。在這一步，實例已完成以下配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
這話的意思我覺得重點在於說掛架階段還沒開始，什麼叫還沒開始掛載，也就是說，模板還沒有被渲染成html，也就是這時候通過id什麼的去查找頁面元素是找不到的。下面看下實例來證明。
所以，一般creadted鉤子函數主要是用來初始化數據。
2：mounted鉤子函數一般是用來向後端發起請求拿到數據以後做一些業務處理。官方解釋如下：
el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
這意思是該鉤子函數是在掛在完成以後也就是模板渲染完成以後才會被調用。下面看實例
下面是結果
nihao
取到了值，這說明這時候vue模板已經渲染完畢。因此，Dom操作一般是在mounted鉤子函數中進行的
computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。
總結：
通常created使用的次數多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會有這一步，而如果你寫入組件中，你會發現在created中無法對chart進行一些初始化配置，一定要等這個html渲染完後才可以進行，那麼mounted就是不二之選。
methods:{}中的方法都需要主動去觸發，比如點擊click之類的
而created(){}、mounted(){}、裡面的代碼都是自動去執行的，即vue生命周期到了哪一步就直接去執行對應鉤子函數裡面的代碼了，無需手動去執行
created中主要放初始化獲取數據之類，mounted()中掛載到具體的DOM節點
computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。
mounted 是生命周期鉤子，vue的生命周期中一個實例的mounted只會運行一次。mounted在vue的渲染模板掛載到$el元素上才會調用，很顯然你export的時候el都么有自然不會運行mounted鉤子函數了。
所有的方法都應該在methods里定義，然後在created或者mounted里 使用this調用方法，用這種方式實現初始化
6、Vue中組件之間的傳參方式有哪些方式？
Vue 組件傳參的八種方式總結
Vue 組件的使用不管是在平常工作還是在面試面試中，都是頻繁出現的。因此系統的梳理一下組件之間的傳參還是非常有必要的
一、props 傳參
子組件定義 props 有三種方式:
// 第一種數組方式
// 第二種對象方式
// 第三種對象嵌套對象方式
第三種對象默認支持 4 種屬性，並且都是非必填的。可以隨意使用
父組件傳參的倆種方式
第一種靜態屬性傳參
注意：
1、在不定義 props 類型的情況下 props 接受到的均為 String。
2、當 props 屬性指定為 Boolean 時，並且只有屬性 key 沒有值 value 時接受到的是 true
第二種動態屬性傳參
注意：
1、需要區分非簡寫形式傳入的值是對象，則會對應 props 中多個值
2、會保留傳入值的類型
3、如果是表達式則獲取到的是表達式的計算結果
二、attrs 和listeners
$attrs
$attrs 會獲取到 props 中未定義的屬性（class 和 style 屬性除外）,支持響應式。常用的場景有倆種：
組件嵌套組件時可以使用 $attrs 來支持過多的屬性支持。比如 elementUI 的 table 組件。支持的屬性十幾個，而平常封裝的時候用的最多的也就一倆個。
屬性默認是添加在父組件上的，有時候想把多餘的屬性添加在子組件上（可以結合 inheritAttrs: false 屬性，讓父屬性不接受多餘的屬性）
$listeners 定義的事件都在子組件的根元素上，有時候想加到其他元素上。就可以使用 $listerners。它包含了父組件中的事件監聽器(除了帶有 .native 修飾符的監聽器)
三、$emit 通知
這里有一道考題: for 循環的時候如何拿到子組件的傳值和 for 中循環的值
答案有倆種，一是 $event, 二是 閉包。只是需要注意 $event 只能獲取到第一個值
四、v-model
這個其實是一種通過 emit，on 的組合方式。優點再於同步值方便,寫法優雅。下面三種寫法其實是一個意思
五、插槽
六、$refs, $root, $parent, $children
$root 獲取根組件
$parent 獲取父組件
$children 獲取子組件(所有的子組件，不保證順序)
$refs 組件獲取組件實例，元素獲取元素
七、project / inject
注意：注入的值是非響應的
八、Vuex
這個相當於單獨維護的一組數據，就不過多的說了。
watch，computed和methods的關系
1.watch和computed都是以Vue的依賴追蹤機制為基礎的 ，它們都試圖處理這樣一件事情：當某一個數據（稱它為依賴數據）發生變化的時候，所有依賴這個數據的「相關」數據「自動」發生變化，也就是自動調用相關的函數去實現數據的變動。
2.對methods:methods裡面是用來定義函數的，很顯然，它需要手動調用才能執行。而不像watch和computed那樣，「自動執行」預先定義的函數
watch和computed各自處理的數據關系場景不同
1. watch 擅長處理的場景： 一個數據影響多個數據
2. computed 擅長處理的場景： 一個數據受多個數據影響
watch用法 監聽下記haiZeiTuan_Name的值，會改變其他所有的值
結果：this.suoLong會變為 '橡膠海賊團索隆',以此類推
computed用法 監聽下記firstName，secName，thirdName的值，會改變luFei_Name的值
methods和computed的區別例子
注意兩次點擊computed返回的時間是相同的！！
1.兩次點擊methods返回的時間是不同的
2.注意兩次點擊computed返回的時間是相同的
【注意】為什麼兩次點擊computed返回的時間是相同的呢？new Date()不是依賴型數據 （不是放在data等對象下的實例數據） ，所以computed只提供了緩存的值，而沒有重新計算
只有符合：1.存在依賴型數據 2.依賴型數據發生改變這兩個條件 ,computed才會重新計算。
參考：http://www.cnblogs.com/penghuwan/p/7194133.html
答：https://codecat.blog.csdn.net/article/details/100031285
1、Promise
Promise 是非同步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大，簡單地說，Promise好比容器，裡面存放著一些未來才會執行完畢（非同步）的事件的結果，而這些結果一旦生成是無法改變的
2、async await
async await也是非同步編程的一種解決方案，他遵循的是Generator 函數的語法糖，他擁有內置執行器，不需要額外的調用直接會自動執行並輸出結果，它返回的是一個Promise對象。
兩者的主要用法、語法就不贅述了，感興趣的同學可以自行查閱 es6中文文檔
兩者的區別
1、Promise的出現解決了傳統callback函數導致的「地域回調」問題，但它的語法導致了它向縱向發展行成了一個回調鏈，遇到復雜的業務場景，這樣的語法顯然也是不美觀的。而async await代碼看起來會簡潔些，使得非同步代碼看起來像同步代碼，await的本質是可以提供等同於」同步效果「的等待非同步返回能力的語法糖，只有這一句代碼執行完，才會執行下一句。
2、async await與Promise一樣，是非阻塞的。
3、async await是基於Promise實現的，可以說是改良版的Promise，它不能用於普通的回調函數。
簡單來看，這兩者除了語法糖不一樣外，他們解決的問題、達到的效果是大同小異的，我們可以在不同的應用場景，根據自己的喜好來選擇使用。