關於vue面試的知識點
- 零到壹度原創
- 2018-03-26 14:48:087175瀏覽
這次帶給大家關於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>直接建立
引用模板講元件內容放在模板d477f9ce7bf77f53fbcf36bec1b69b7a中引用，元件中資料data;function 和vue實例儲存資料不同
#componect :is="" 元件，多個元件使用同一個掛的點，動態切換,
keep-alive 快取元件，避免從新創建，效率比較高
使用方法 7c9485ff8c3cba5ae9343ed63c2dc3f795543a64d6150a5d6f46db7704427e2a
資料傳遞：父子元件，在一個元件內部又定義了另一個元件，稱為父子元件。
子组件只能在付组件中使用，默认情况下，子组件不能访问付组件数据。每个组件的作用域是独立的。
组件间数据的通信：在调用组件时，绑定想要获取的付组件的数据，在子组件内部，使用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" 获取 f995f70ae2091cccd4738847b20f1f7b
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:'<h3>我是主页</h3>'
}
var News={
template:'<h3>我是新闻</h3>'
}//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>知识点：30e8033e360bcffb1ce9b4703e10b64c /* scoped表示该样式只在当前组件中有效 */
路由嵌套和参数传递：
a.查询字符串 login?name=tome&pwd=123 显示 {{$route.query}}
b。rest风格url regist/alice/324 显示获取 {{$router.params}}
路由實例的方法：
router.push(); 新增路由，功能和6a078d9a0c4b84a49fc544194c8dfb2b 相同，都是跳頁
#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 -Snpm run dev在main.js 引入並使用這個元件 import ElementUI from 'elemtn-ui' import element-ui/lib/eheme=default/ index.cssvue.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.$storeimport vue fomr vue import vuex from vuex vue.use(vuex); vuex核心store 相當於一個容器，一個store實例中包含一下屬性與方法：getters 取得屬性actions 定義方法 動作，如流程判斷 非同步請求 const action={ 方法名稱（context){}）} context 物件有comit dispatch statecommit 提交的意思，修改資料唯一方式， 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中文網其他相關文章！