vue核心知識點
1.vue.js的兩個核心是什麼？
- 數據驅動,也叫雙向數據綁定。 Vue.js數據觀測原理在技術實現上,利用的是ES5Object.defineProperty和存儲器屬性: getter和setter(所以只兼容IE9及以上版本),可稱爲基於...
- 組件系統。 vue組件的核心選項:
2.請說出vue幾種常用的指令
- v-text：更新DOM對象的 textContent
- v-html：更新DOM對象的 innerHTML
- v-bind：當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM
- v-on：綁定的事件定義在methods
- v-model：監聽用戶的輸入事件以更新數據
- v-for：基於源數據多次渲染元素或模板塊
3.請問 v-if 和 v-show 有什麼區別
1.共同點
都是動態顯示DOM元素
2.區別
（1）手段：
v-if是動態的向DOM樹內添加或者刪除DOM元素；
v-show是通過設置DOM元素的display樣式屬性控制顯隱；
（2）編譯過程：
v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷燬和重建內部的事件監聽和子組件；
v-show只是簡單的基於css切換；
（3）編譯條件：
v-if是惰性的，如果初始條件爲假，則什麼也不做；只有在條件第一次變爲真時纔開始局部編譯（編譯被緩存？編譯被緩存後，然後再切換的時候進行局部卸載);
v-show是在任何條件下（首次條件是否爲真）都被編譯，然後被緩存，而且DOM元素保留；
（4）性能消耗：
v-if有更高的切換消耗；
v-show有更高的初始渲染消耗；
（5）使用場景：
v-if適合運營條件不大可能改變；
v-show適合頻繁切換。
4、vue常用的修飾符
事件修飾符
<!-- 阻止單擊事件繼續傳播 --><a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 --><form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 --><a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 --><form v-on:submit.prevent></form>
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處理，然後才交由內部元素進行處理 --><div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 --><!-- 即事件不是從內部元素觸發的 --><div v-on:click.self="doThat">...</div>
按鍵修飾符
爲了在必要的情況下支持舊瀏覽器，Vue 提供了絕大多數常用的按鍵碼的別名：
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right
系統修飾符
可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。
.ctrl
.alt
.shift
.meta
f="https://cn.vuejs.org/v2/guide/events.html#exact-%E4%BF%AE%E9%A5%B0%E7%AC%A6">.exact 修飾符
2.5.0 新增
.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 --><button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的時候才觸發 --><button @click.ctrl.exact="onCtrlClick">A</button><!-- 沒有任何系統修飾符被按下的時候才觸發 --><button @click.exact="onClick">A</button>5、v-on可以監聽多個方法嗎？
5.vue中 key 值的作用
“key值:用於 管理可複用的元素。因爲Vue 會盡可能高效地渲染元素,通常會複用已有元素而不是從頭開始渲染。這麼做使 Vue 變得非常快,但是這樣也不總是符合實際需求。 2.2.0+ 的版本里,當在組件中使用 v-for 時,key 是必須的。”
- vue中子組件調用父組件的方法
- 第一種方法是直接在子組件中通過this.$parent.event來調用父組件的方法
- 第二種方法是在子組件裏用$emit向父組件觸發一個事件，父組件監聽這個事件就行了。（$emit）
- 第三種是父組件把方法傳入子組件中，在子組件裏直接調用這個方法（$props）
- vue中 keep-alive 組件的作用
keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。
include - 字符串或正則表達，只有匹配的組件會被緩存
exclude - 字符串或正則表達式，任何匹配的組件都不會被緩存
9、vue中如何編寫可複用的組件？
10、什麼是vue生命週期和生命週期鉤子函數？
11、vue生命週期鉤子函數有哪些？
12、vue如何監聽鍵盤事件中的按鍵？
13、vue更新數組時觸發視圖更新的方法
14、vue中對象更改檢測的注意事項
16、vue-cli工作中如何自定義一個過濾器？
17、vue等單頁面應用及其優缺點
單頁面應用（SPA），通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中
優點：
1、用戶體驗好，快，內容的改變不需要重新加載整個頁面，對服務器壓力較小。
2、前後端分離，比如vue項目
3、完全的前端組件化，前端開發不再以頁面爲單位，更多地採用組件化的思想，代碼結構和組織方式更加規範化，便於修改和調整；
缺點：
1、首次加載頁面的時候需要加載大量的靜態資源，這個加載時間相對比較長。
2、不利於 SEO優化，單頁頁面，數據在前端渲染，就意味着沒有 SEO。
3、頁面導航不可用，如果一定要導航需要自行實現前進、後退。（由於是單頁面不能用瀏覽器的前進後退功能，所以需要自己建立堆棧管理）
18、什麼是vue的計算屬性？
- vue-cli提供的幾種腳手架模板（5種）
我們用 vue init 命令來初始化項目：vue init
init：表示我們要用 vue-cli 初始化項目；
：表示模板名稱，vue-cli官網爲我們提供了5種模板：
1、webpack：一個全面的 webpack+vue-loader 的模板，功能包括熱加載、linting、檢測和CSS擴展；
2、webpack-simple：一個簡單 webpack+vue-loader 模板，不包含其他功能，可以快速的搭建 vue 的開發環境；
3、browserify：一個全面的 Browserify+vueify 模板，功能包括熱加載、linting、單元測試；
4、browserify-simple：一個簡單的 Browserify+vueify 模板，不包含其他功能，可以快速的搭建 vue 的開發環境；
5、simple：一個最簡單的單頁應用模板。
20、vue父組件如何向子組件中傳遞數據？
子組件用props屬性獲取傳的數據
- vue-cli工程升級vue版本
1.先升級npm的版本
npm install -g npm
2.再卸載之前的vue cli 2.9.6
npm uninstall -g @vue/cli
3.下載最新的vue cli版本
npm install -g @vue/cli