關於vue面試的知識點

這次帶給大家關於vue面試的知識點，有需要的夥伴可以留意學習一下，下面一起跟著小編來看一下。

【相關推薦：vue面試題（2020）】

1.vue簡介 

vue是一個建構用戶界面的框架。是一個輕量級mvv框架，和angular一樣是所謂的雙向資料綁定，資料驅動和組件化的前端開發，透過簡單的api實現響應式的資料綁定和組合試圖組件，容易上手，小巧。

2.安裝vue-devtools插件，方便在chrome中調試vue，配置是否允許vue-devtools檢查程式碼，方便調試，生產環境設定為false，vue.config.devtools = false;

vue.config.productionTip=false;阻止啟動生產訊息。

3.常用指令。

v-model 雙向資料綁定，一般用於表單元素。

v-for 對陣列或物件進行循環操作，使用是v-for 不是v-repeat 

v-on 用來綁定時間，用法：v-on :時間= '函數'

v-show/v-if 用來顯示或隱藏元素，v-show 是透過display實現，v- if 是每次刪除後在創建

4.事件和屬性

#v-on:click = " 簡寫@click=""

$event 事件對象，裡麵包括事件相關訊息，如事件來源，時間類型，偏移量等

事件冒泡，原生js方式，依賴事件對象，vue方式，不依賴事件對象，@click.stop 來阻止事件冒泡；

鍵盤事件：@keydown.13 或keydown. enter  

事件修飾詞 .stop  呼叫event.stopPropagation();

v-bind 用於屬性綁定,用法v-bind :屬性=“”   舉例v-bind:src="" 簡寫 ：src=""

5。使用基於html的模板語法，將dom綁定到vue實例中的資料模板就是{{}}  用來進行綁定資料顯示在頁面中

雙向綁定 v- model 

單一項目綁定 {{}} 可能會出現閃爍問題， 也可以使用v-text  v-html

其他指令 v -once 資料綁定一次 v-pre 不變異，直接原樣顯示

6.過濾器

用來過濾模型數據，在顯示先前進行資料對的處理與篩選

語法：{{data |filter（參數） |filter（參數）}}

內建過濾器，2.0之後都刪掉，如果使用可以藉助第三方庫 如lodash data-fns 日期格式化accounting.js 貨幣格式化以及自訂

7.發送ajax請求

vue本身不支援發送ajax請求，需要使用vue-resourc axios等插件實現，建議使用axios

axios是基於promise的http請求客戶端，用來傳送請求

基本用法：

axios.get(url[,options]);  传参方式，url或者params传参
axios.post(url,data,[options]);

注意：axios預設傳送資料時，資料格式是request payload，並非我們床用的form data格式，所以參數必須以鍵值物件是傳遞

，不能以json形式傳參

傳參的方式： 自己拼接鍵值對，使用transformrequst 在請求發送前將請求資料轉換，或使用qs模組轉換

#axios不支援跨網域請求，可以使用vue-resource 發送跨網域請求。

跨網域發送請求： this.$http.get(url,[options]);    this.$http.post(url,[options]);

8.vue生命週期

vue實例從建立到銷毀過程成為生命週期

9。計算屬性

計算屬性也是用來儲存數據，具有這兩個特點：數據可以進行邏輯處理操作，對計算屬性中的數據進行監視。

10.vue實例屬性與方法

#屬性vm.$el  vm.$data vm.$options vm.$refs

方法vm.$mount()  vm.$destroy vm.$nextTick(callback) vm.$set(object,key,vlaue) vm.$delete(object,key) vm. $watch(data,callback)

11,自訂指令

自訂全域指令  vue.directive （指令id，定義物件）

12.過度（動畫）

vue在插入更新或一處dom時，提供多種不同方式應用過程，本質還是使用css動畫，

基本用法： 使用transition元件，將要執行動畫的元素保函在改元件內

結合第三方動畫庫 animater.css 一起使用

 <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
        <p v-show="flag">显示内容</p>
    </transition>

#13.元件

元件是vue最強大的功能之一，元件可狂戰html元素，封裝重用程式碼，元件是自訂元素物件。

定義元件方式，a>先建立元件建構器，然後由元件建構器建立元件。 b>直接建立

引用模板講元件內容放在模板