1、百度統計是什麼？
百度統計是百度推出的一款免費的專業網站流量分析工具，能夠告訴使用者訪客是如何找到並瀏覽使用者的網站，在網站上做了些什麼，有了這些資訊，可以幫助使用者改善訪客在使用者的網站上的使用體驗，不斷提升網站的投資回報率。“世界很複雜，百度更懂你”，百度統計提供了幾十種圖形化報告，全程跟蹤訪客的行為路徑。同時，百度統計整合百度推廣資料，幫助使用者及時瞭解百度推廣效果並優化推廣方案。
2、H5和CSS3新增特性？
CSS3:
選擇器：屬性選擇器、偽類選擇器、偽元素選擇器。
特性：
1.顏色：新增RGBA，HSLA模式
2. 文字陰影（text-shadow）
3.邊框： 圓角（border-radius）邊框陰影： box-shadow
4. 盒子模型：box-sizing
5.背景：background-size 設定背景圖片的尺寸background-origin 設定背景圖片的原點
background-clip 設定背景圖片的裁切區域，以”，”分隔可以設定多背景，用於自適應佈局
6.漸變：linear-gradient、radial-gradient
7. 過渡：transition，可實現動畫
8. 自定義動畫
9. 在CSS3中唯一引入的偽元素是 ：：selection.
10. 媒體查詢，多欄佈局
11. border-image
12.2D轉換：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
13. 3D轉換
偽類：
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。
:enabled、:disabled 控制表單控制元件的禁用狀態。
:checked，單選框或核取方塊被選中。
------------------------------------------------------------------------------------------------------------------------
H5:
1. 拖拽釋放(Drag and drop) API
2. 語義化更好的內容標籤（header,nav,footer,aside,article,section）
3. 音訊、視訊API(audio,video)
4. 畫布(Canvas) API
5. 地理(Geolocation) API
6. 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；
7. sessionStorage 的資料在瀏覽器關閉後自動刪除
8. 表單控制元件，calendar、date、time、email、url、search
9. 新的技術webworker, websocket, Geolocation支援HTML5標籤；
* IE8/IE7/IE6支援通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支援HTML5新標籤，
瀏覽器支援新標籤後，還需要新增標籤預設的樣式：
* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
10.本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；sessionStorage 的資料在瀏覽器關閉後自動刪除。
3、JavaScript基礎（內建物件、BOM、DOM、JSON、AJAX）
1、資料型別
基本資料型別：字串、數字、布林值、空、未定義；
引用資料型別：物件、陣列、函式；
2、轉義字元
\n 換行
\r 回車
\t tab
\b 退格
\f 換頁符
3、瀏覽器物件BOM
（1）window物件的屬性（視窗高度）
（2）瀏覽器儲存
sessionStorage ：在瀏覽器中儲存 key/value 對。 在關閉視窗或標籤頁之後將會刪除這些資料。
localStorage： 在瀏覽器中儲存 key/value 對。沒有過期時間。
cookie： 儲存於訪問者的計算機中的變數，當同一臺計算機通過瀏覽器請求某個頁面時，就會傳送這個cookie，識別使用者。
（3）計時器
setInterval()；每隔指定的時間執行
setTimeout()；在指定時間後執行
（4）開啟/關閉視窗
window.resizeTo(width,height)；把視窗的大小調整到指定的寬度和高度。
window.scrollTo(x,y) ；把內容滾動到指定的座標。
window.open([URL], [視窗名稱], [引數字串])開啟視窗
（5）History 物件
包含使用者（在瀏覽器視窗中）訪問過的 URL。可通過window.history進行訪問。
**window.history.back() 載入歷史列表中的前一個 URL。
window.history.forward() 載入歷史列表中的下一個 URL。
window.history.go()；載入歷史列表中的某個具體頁面
（6）location物件，用於獲取或設定窗體的URL。
（7）Navigator 物件
包含有關瀏覽器的資訊，通常用於檢測瀏覽器與作業系統的版本。
4、HTML DOM操作
1、DOM方法
節點訪問： getElementById() 返回帶有指定 ID 的元素。
getElementsByTagName() 返回包含帶有指定標籤名稱的所有元素的節點列表（集合/節點陣列）。
getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表。
建立節點： createAttribute() 建立屬性節點。
createElement() 建立元素節點。
createTextNode() 建立文字節點。
新增/刪除/替換元素
appendChild(新元素) 追加元素，新元素作為父元素的最後一個子元素進行新增
insertBefore(新節點，指定節點) 在指定的子節點前面插入新的子節點。
removeChild() 刪除子節點，必須清楚該元素的父元素。
replaceChild(新節點，指定節點) ;：替換子節點。
2、DOM屬性
innerHTML 用於獲取或替換 HTML 元素的內容。
element.style.樣式屬性名=新樣式內容，改變html樣式。
3、元素物件
nodeName 屬性返回節點的名稱。
nodeValue 屬性返回節點的值。
nodeType 屬性返回節點的型別。nodeType 是隻讀的。
parentNode - 元素的父節點
childNodes - 元素的子節點
firstChild： 元素的第一個子元素
lastChild： 元素的最後一個子元素
4、DOM事件
onclick 點選
onblur：失去焦點
onfocus 得到焦點
onkeydown 按下鍵盤
onkeyup 鬆開鍵盤
onkepress 按住鍵盤
onmousedown 按下滑鼠
onmouseup 鬆開滑鼠
onmouseover 滑鼠懸浮
ommousemove 移動滑鼠
onmouseout 移開滑鼠
select 選中
onload ：頁面載入
onchange：改變
onsubmit ：表單提交
5、JSON資料
用於儲存和傳輸資料的格式，通常用於服務端向頁面傳遞資料；
JSON.stringify()： JavaScript -> JSON js值轉換成JSON字串
JSON.parse() ： JSON-> JavaScript 字串轉換成js物件
6、Ajax更新部分頁面
（1）建立 XMLHttpRequest 物件
XMLHttpRequest 用於在後臺與伺服器交換資料。
（2）向服務端傳送請求（非同步/同步）
xmlhttp.open(“GET/POST”,url,非同步true/同步false);規定請求型別、伺服器上檔案的地址以及是否非同步處理請求。
xmlhttp.send(string);將請求傳送到伺服器。string：僅用於 POST 請求。
（3）伺服器響應
7、Vue、Vuex、Vue-router分別是什麼？有什麼作用？
vue：
1、核心：實現資料雙向繫結和元件化模式。
2、單向資料流：簡單來說就是資料是單向的，資料流動方向可以追蹤，流向單一，追蹤問題可以更快捷，缺點是寫起來不方便。
雙向資料流：資料之間是相通的，將資料變更的操作隱藏在框架內部。優點是表單互動較多的場景下，會簡化大量與業務無關的程式碼。 缺點是無法追蹤區域性狀態的改變，增加了出錯時debug的難度。
3、對MVC、MVVM的理解
MVC:
特點 ：（1）view傳送命令到controller（控制器）
（2）controller完成業務邏輯後，要求model（模型）改變狀態
（3）model將新的資料傳送到view，使用者得到反饋。
MVC所有的通訊都是單向的。
MVVM:
特點：（1）各部分之間的通訊都是雙向的
（2）採用雙向繫結：view的變化。自動反應在viewModel（檢視模型）。
4、vue的生命週期
beforeCreated()在例項建立之間執行，資料未載入狀態created()在例項建立、資料載入後，能初始化資料，dom渲染之前執行beforeMount()虛擬dom已建立完成，在資料渲染前最後一次更改資料mounted()頁面、資料渲染完成，真實dom掛載完成beforeUpadate()重新渲染之前觸發updated()資料已經更改完成，dom也重新render完成,更改資料會陷入死迴圈beforeDestory()和destoryed()前者是銷燬前執行（例項仍然完全可用），後者則是銷燬後執行
5、元件通訊
父傳子：將父元件的資料繫結到使用子元件的自定義標籤上，子元件在選項中新增一個props屬性來接 受資料；
子傳父：在響應該點選事件的函式中使用$emit來觸發一個自定義事件，並傳遞一個引數。
6、v-if 和 v-show 區別
使用了 v-if 的時候，如果值為 false ，那麼頁面將不會有這個 html 標籤生成。
v-show 則是不管值為 true 還是 false ，html 元素都會存在，只是 CSS 中的 display 顯示或隱藏
7、$route和$router的區別
$router 為 VueRouter 例項，想要導航到不同 URL，則使用 $router.push 方法
$route 為當前 router 跳轉物件裡面可以獲取 name 、 path 、 query 、 params 等
8、NextTick 是做什麼的
$nextTick 是在下次 DOM 更新迴圈結束之後執行延遲迴調，在修改資料之後使用 $nextTick，則可以在回撥中獲取更新後的 DOM
9、Vue 元件 data 為什麼必須是函式
因為js本身的特性帶來的，如果 data 是一個物件，那麼由於物件本身屬於引用型別，當我們修改其中的一個屬性時，會影響到所有Vue例項的資料。如果將 data 作為一個函式返回一個物件，那麼每一個例項的 data 屬性都是獨立的，不會相互影響了
10、計算屬性computed 和事件 methods 有什麼區別
computed: 計算屬性是基於它們的依賴進行快取的,只有在它的相關依賴發生改變時才會重新求值
method :只要發生重新渲染，method 呼叫總會執行該函式
11、 對比 jQuery ，Vue 有什麼不同
jQuery 專注檢視層，通過操作 DOM 去實現頁面的一些邏輯渲染； Vue 專注於資料層，通過資料的雙向繫結，最終表現在 DOM 層面，減少了 DOM 操作
Vue 使用了元件化思想，使得專案子集職責清晰，提高了開發效率，方便重複利用，便於協同開發
12、Vue 中怎麼自定義過濾器
可以用全域性方法 Vue.filter() 註冊一個自定義過濾器，它接收兩個引數：過濾器 ID 和過濾器函式。過濾器函式以值為引數，返回轉換後的值
13、Vue 中怎麼自定義指令
全域性註冊
// 註冊一個全域性自定義指令 `v-focus`
Vue.directive('focus', {
// 當被繫結的元素插入到 DOM 中時……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})區域性註冊
directives: {
focus: {
// 指令的定義
inserted: function (el) {
el.focus()
}
}
}14、對 keep-alive 的瞭解
keep-alive 是 Vue 內建的一個元件，可以使被包含的元件保留狀態，或避免重新渲染
15、Vue 中 key 的作用
key 的特殊屬性主要用在 Vue 的虛擬 DOM 演算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態元素並且儘可能的嘗試修復/再利用相同型別元素的演算法。使用 key，它會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。
有相同父元素的子元素必須有獨特的 key。重複的 key 會造成渲染錯誤
16、vue 等單頁面應用的優缺點
優點：
- 良好的互動體驗
- 良好的前後端工作分離模式
- 減輕伺服器壓力
缺點：
- SEO難度較高
- 前進、後退管理
- 初次載入耗時多
Vuex
1、vuex是什麼
vuex是狀態管理器。統一管理和維護各個vue元件的可變狀態。
vuex相當於一個全域性變數，用來儲存狀態和管理資料。
2、五個模型
（2）mutations:更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation,命名規則：動詞_名詞，全部大寫，例如：SET_USER
（3）actions: Action 提交的是 mutation，而不是直接變更狀態。Action 可以包含任意非同步操作。命名規則：動詞名詞,駝峰規則 例如:setUser；
（4）getters:簡單來說就是對state裡面的屬性進行計算，所有需要訪問vuex中的屬性，都需使用getter來獲取， getter需要單獨成一個檔案
vue-router
1、vue-router是什麼？有哪些元件？
動態路由是單頁面的路徑管理器，vue頁面應用是基於路由和元件的，路由用於設定訪問路徑 ，並將路徑和元件對映起來。也就是說元件之間的切換。
就是從列表頁跳轉到詳情頁，列表頁是一些接近或者重複的內容，所以詳情頁的頁面結構是比較接近的，但是資料不一樣。因此需要一個元件來渲染不同的頁面，資料不一樣是受到url的影響。所以url的值不一樣，url不一樣拿到的資料也不一樣，因此渲染出來的頁面也不一樣。同一個結構渲染出來的頁面不一樣。因此是路由不一樣，所以叫動態路由。這次的路由結構是和上次類似但不完全一樣，是一個變化的值，可以調整和改變的值，經常用於列表頁調整到詳情頁。
<router-link>和<router-view>和<keep-alive>
2、active-class 是哪個元件的屬性？
active-class是router-link終端屬性，用來做選中樣式的切換，當router-link標籤被點選時將會應用這個樣式
3、怎麼定義vue-router的動態路由？
動態路由的建立，主要是使用path屬性過程中，使用動態路徑引數，以冒號開頭
4、vue-router響應路由引數的變化
- 用watch 檢測
// 監聽當前路由發生變化的時候執行
watch: {
$route(to, from){
console.log(to.path)
// 對路由變化做出響應
}
}
- 元件內導航鉤子函式
beforeRouteUpdate(to, from, next){
// to do somethings
}
5、vue-router 傳參
Params- 只能使用name，不能使用path
- 引數不會顯示在路徑上
- 瀏覽器強制重新整理引數會被清空
// 傳遞引數
this.$router.push({
name: Home，
params: {
number: 1 ,
code: '999'
}
})
// 接收引數
const p = this.$route.params
Query:
- 引數會顯示在路徑上，重新整理不會被清空
- name 可以使用path路徑
// 傳遞引數
this.$router.push({
name: Home，
params: {
number: 1 ,
code: '999'
}
})
// 接收引數
const p = this.$route.params
6、vue-router實現路由懶載入（動態載入路由）
- 把不同路由對應的元件分割成不同的程式碼塊，然後當路由被訪問時才載入對應的元件即為路由的懶載入，可以加快專案的載入速度，提高效率
const router = new VueRouter({
routes: [
{
path: '/home',
name: 'Home'，
component:() = import('../views/home')
}
]
})