關於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>直接建立

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

#componect :is=""  元件，多個元件使用同一個掛的點，動態切換,

      keep-alive 快取元件，避免從新創建，效率比較高

使用方法    

資料傳遞：父子元件，在一個元件內部又定義了另一個元件，稱為父子元件。

       子组件只能在付组件中使用，默认情况下，子组件不能访问付组件数据。每个组件的作用域是独立的。

       组件间数据的通信：在调用组件时，绑定想要获取的付组件的数据，在子组件内部，使用props选项来生命获取

的数据，接收来自付组件的数据。例子：props:['msg']   props可以是数组，也可以是对象props:{} 允许配置高级设计比如类型判断

数据的校验，设置默认值 props:{messge:String,age:Number,name:{type:String,rquired:true,default:19,validator:function(){}}},对象做数组的默认值，

对象必须使用函数返回。

组件中的数据有三种形式：data  props computed 

付组件访问子组件数据方式：

a.在子组件中使用vm.$emit（事件名，数据） 出发一个自定义事件，事件名自定义

b.付组件在使用子组件的地方监听子组件出发事件，并在付组件中定义方法，用来获取数据

单项数据流：

props是单项绑定的，当付组件的属性变化时，将传导给子组件，但是不会反过来，而且不允许子组件直接

修改付组件中的数据

解决方案： a.如果子组件享把他作为局部数据来使用，可以将数据存入另一个变量在操作

b.如果子组件想修改数据并同步付组件，使用.sync  2.3开始支持，或者将付组件数据包装成udixiang，

然后在子组件中修改对象的属性。

非父子组件间通信：

可以通过一个空的vue实例来作为中央事件总线，用他来出发事件或监控事件

var Event = new Vue();    空对象

Event.$emit(事件名，数据)；  发送数据

Event.$on(事件名，data=>{})  监听接收数据

slot内容分发：

用来获取组件中的元内容，就是组件标签中的内容；

获得指定标签内容可以给标签定义  slot="s1"   获取  

14.vue-router 路由

使用vue.js 开发spa 单页面应用，根绝不同url地址，显示不同内容，但实现在统一页面红，称单页面应用。

bower info vue-router    cnpm install vue-router -S

<p id="itany">
<p>
<!-- 使用router-link组件来定义导航，to属性指定链接url -->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</p>
<p>
<!-- router-view用来显示路由内容 -->
<router-view></router-view>
</p>
</p>

<script>
//1.定义组件
var Home={
template:&#39;<h3 id="我是主页">我是主页</h3>&#39;
}
var News={
template:&#39;<h3 id="我是新闻">我是新闻</h3>&#39;
}

//2.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news/:username/:password'',component:News},
{path:'*',redirect:'/home'} //重定向
]

//3.创建路由实例
const router=new VueRouter({
routes, //简写，相当于routes:routes
// mode:'history', //更改模式
linkActiveClass:'active' //更新活动链接的class类名
});

//4.创建根实例并将路由挂载到Vue实例上
new Vue({
el:'#itany',
router //注入路由
});
</script>

知识点：

路由嵌套和参数传递：

a.查询字符串   login?name=tome&pwd=123     显示  {{$route.query}}

b。rest风格url       regist/alice/324    显示获取 {{$router.params}}

路由實例的方法：

router.push();  新增路由，功能和 相同，都是跳頁

#router.replace() 替換路由，和上功能一樣，不產生歷史記錄

單檔案元件：

.vue 檔稱單檔案元件，是vue.js 自訂的檔案格式，一個.vue檔案就是一個單獨的毒箭，在檔案內封裝了

單獨的js  css html

.vue檔案由三個部分組成 template style  script

vue-loader 瀏覽器本身不認識你.vue文件，所以必須對.vue檔案載入解析，此時需要vue-loaderleisi 的loaderhaiyou 

很多，html-loader css-loader style-loader  babel-loader  需要注意vue-loader 是計劃於webpack的

webpack 是一個前端資源模組化載入器和打包工具，

安裝相關範本：

cnpm install vue-template-compiler -D //預先編譯範本
    合併：cnpm install -D webpack webpack-dev-server vue-loader vue- html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env  vue-template-compiler

#執行測試：  npm run dev

15.鷹架vue-cli

    vue-cli是vue鷹架，可以快速建構專案結構，

常用項目模板：webpack 保函EsLint程式碼麼規範檢查和unit單元測試，

webpack-simple 沒有程式碼檢查和單元測試

#browserify 使用的也比較多

browserigy-simple

安裝vue-cli，設定vue指令環境 
    cnpm install vue-cli -g
    vue --version
    vue list
 初始化項目，產生項目範本
    語法：vue init 範本名 項目名稱
 進入產生的項目目錄，安裝模組包
    cd v. -cli-demo
    cnpm install
 運行
    npm run dev  //啟動測試服務
    npm run build //將項目打包輸出dist目錄，項目上線的話要將dist目錄貝拷貝到伺服器上
 使用webpack模板
    vue init webpack vue-cli-demo2
    ESLint是用來統一程式碼規格和風格的工具，如縮排、空格、符號等，要求比較嚴格
16.模組化開發

   首先在一個目錄下vue init webpack-simple vue-cli-demo 創建項目

  進入目錄 cd vue-cli-demo       cmpn install cd vue-cli-demo       cmpn install dev  運行測試

cmpn install vue-router -S       -S是生產依賴的意思；

編輯main.js  import VueRouter form ''vue-router'    vue.use(Vue/router ); 使用之後全域都可以用

編輯app.vue  編輯router.config,js 

cnpm install axios -S

使用axios兩個方式：

a.在使用axios的元件中，都要引入axios  import axios from 'axios'      axios.get('url').then(resp ->{resp.data}); .catch(eorr->){}

        b.在main.js 中全域引入 import axios from 'axios'  並添加到vue原型中vue.prototype.$http=axios; 然後其他組件可以添加到vue原型中vue.prototype.$http=axios; 然後其他組件可以添加到vue原型中vue.prototype.$http=axios; 然後其他組件可以添加到vue原型中vue.prototype.$http=axios; 然後其他組件可以

vue.$http.get(); 或this.$http.get();

#為自訂元件新增事件：

例如自訂一個button   vue註冊   預設不能綁定@click=send   這樣寫 @click.ntaive=send 就可以

17ui函式庫 element ui

#是一個ui的元件庫，是餓了麼提供的一套基於vue 2.0的元件庫 可以快速開發網址，提高效率

  element ui  pc端  mintui  行動裝置端官網 element.eleme.io

cnpm install element-ui -S

npm run dev

在main.js 引入並使用這個元件 import ElementUI from 'elemtn-ui'  import element-ui/lib/eheme=default/ index.css

vue.use(ElementUI);  這種引入方式是引入全部的元件內容

在webpack.confgi.js 中加入loader   test:/\.css$/, loader:'style-loader!css-loader'

cnpm instal  style-loader -D    字體字庫loader設定

webpack設定更改要重新啟動

動態樣式 是使用lessless

使用less  安裝loader   less  less-loader  設定 test:/\.less$/,loader:less-loader     指定style l ang=less  必須指定樣式

全域元件：可以在main.js 中使用vue.use 進入全域引入，然後在其他元件中都可以使用

建立。 vue元件，建立index.js檔案  import Login from './Login.vue'export default {
install:function(Vue){
Vue .component('Login',Login);

}}

#普通元件：每次使用都要引入，如axios

18.vuex 狀態管理模式

採用集中式存儲，管理應用所有組件的狀態，簡單說集中管理數據，類似於react中的redux，基於flux前段狀態管理框架。

基本使用：nmp install vuex -S

建立store.js 文件，vuex相關配置。在main.js 中匯入，import store fomr './store.js    main.js 設定store選項，子群組this.$store

import vue fomr vue  import vuex from vuex   vue.use(vuex);

vuex核心store  相當於一個容器，一個store實例中包含一下屬性與方法：

getters 取得屬性

actions 定義方法 動作，如流程判斷 非同步請求  const action={ 方法名稱（context){}）}   context 物件有comit  dispatch state

commit 提交的意思，修改資料唯一方式， conmit('add) 提交一個叫add的變更

mutations 定義變化######var state= { count:6}   //建立store物件  const store=new Vuex.Strore{{state}}; vargetters ={count)(){return state.count}} export default store;###

編輯 app。 js 編輯store,  作為計算屬性：computed:(){return this.$store.state.count};

方式一  this.#store存取 方式二 mapGetters mapActios存取

mapGetter 取得屬性

mapActions 取得方法

匯入輔助函數 import {mapGetter} from vuex

computed:mapGetters{('count')}

以上是關於vue面試的知識點的詳細內容。更多資訊請關注PHP中文網其他相關文章！