vue經常使用知識總結 vue詳情解析 vue面試總結

vue-loader是什麼？用途有哪些？

是解析vue文件的一個加載器，用途是js能夠寫es6，style樣式能夠scss或less，template能夠加jade

active-class是那個組件屬性？

Vue-router模塊的router-link組件,設置激活時樣式

css只在當前組件庫中起做用：<style scoped>

keep-alive包括動態組件，避免從新渲染，保留組件狀態

緩存：  <keep-alive include=」組件名」></keep-alive>

不緩存：<keep-alive exclude=」組件名」></keep-alive>

使用：複雜項目時

路由字典中定義{path:’/detail’,meta:{keepAlive:false/true}} 是否緩存

根目錄中：

<keep-alive><router-view v-if=」$route.meta.keepAlive」></router-view></keep-alive>

<keep-alive><router-view v-if=」 ! $route.meta.keepAlive」></router-view></keep-alive>

VUE如何自定義屬性

全局自定義：

Vue.directive(‘focus’,{

         Inserted:function(el){

                   el.focus()  //聚焦函數

}       

})

二十四：VNode是什麼？虛擬DOM是什麼？

Vue在頁面上渲染的節點，及其子節點稱爲虛擬節點，簡稱VNode；虛擬DOM時由組件樹創建起來的整個VNode樹的稱呼

二十五：scss是什麼？有哪些特性？怎麼使用？

是css的預編譯，特新有能夠用變量($變量名=值)，能夠用混合器()，能夠嵌套，能夠繼承，能夠運算，安裝先裝css-loader，node-loader，sass-loader，在webpack.base配置，style標籤上加lang=」scss」

二十五：Vue router如何實現跳轉

<router-link></router-link>   router.push(‘/’)      router.go(0)

二十六：vue router跳轉和location.href有什麼區別？

Router是hash改變；location.href是頁面跳轉，刷新頁面

 

一、vue是漸進式輕量級的框架。

二、vue的兩個核心是什麼？數據驅動和組件化

三、v-if與v-show的區別？

都是判斷dom節點的顯示或隱藏，v-show是css的display：none，適合作頻繁的切換。

v-if是內部組件的重建和銷燬的過程

四、vue的經常使用修飾符

a、按鍵修飾符（.delete）@keyup.delete="onKey"

b、系統修飾符（enter，ctrl,alt,shift.mate）鼠標按鈕修飾符（.left,right ,middle）

.lazy       input輸入完成時的修飾符  <input v-model.lazy="msg" >

.number     若是想自動將用戶的輸入值轉爲數值類型  <input v-model.number="age" type="number">

.trim     過濾空白字符串     <input v-model.trim="msg">

五、vue中key的做用

dom每一個節點的惟一標識符，爲了高效的更新虛擬dom，vue中在使用相同標籤名元素的過渡切換時

六、在vue中的data爲何必須是函數？

在vm=new Vue（）的時候data能夠是對象進行操做，可是在component中data必須的函數當data選項是一個函數的時候，每一個實例能夠維護一份被返回對象的獨立的拷貝，這樣各個實例中的data不會相互影響，是獨立的

七、v-for的優先級比v-if要高。。。

八、vue中子組件調用父組件的方法？

a、this.$parent.fatherMethod()經過this.$parent.event直接調用

b、this.$emit('fatherMethod'); <child @fatherMethod="fatherMethod"></child>子組件經過this.$emit('father')向父組件觸發一個事件

c、<child :fatherMethod="fatherMethod"></child> props: {  fatherMethod: { type: Function,default: null}}, methods: {childMethod() { if (this.fatherMethod)this.fatherMethod(); }}}父組件把方法傳給子組件，子組件props接受function後調用這個方法

九、vue的生命週期，八個階段：建立前/後、載入前/後、更新前/後、銷燬前/後。

beforeCreate：這個階段的$el和data都是undefined

created：這個階段vue有了data，可是仍是沒有$el

beforeMount:這個階段$el和data都初始化了，可是爲虛擬DOM，data.message尚未被替換

mounted  vue實例掛載完成data.message成功渲染

beforeUpdate和updated，在data變化的時候會觸發這兩個的方法

在執行destroyed的方法後，對data改變不會再觸發周期函數，說明了此時的vue實例已經解除了事件的監聽和dom的綁定

第一次加載會觸發哪幾個鉤子？

會觸發beforeCreate , created ,beforeMount ,mounted

路由鉤子

全局路由鉤子：

Router.beforeEach((to,from,next)=>{... next()})

注意：必定要調用next(),不然頁面卡在那，通常用於對路由跳轉前進行攔截，參數：

To：即將要進入的目標路由對象    From：當前導航正要離開的路由

Next()：跳轉下一個頁面      next(‘/path’)：跳轉指定路由

Next(false)：返回原來頁面  next((vm)=>{})：且在beforeRouterEnter用

好比根據登陸狀態跳轉頁面判斷(to.name->name是路由名)

Router.beforeEach(function(to,from,next){if(to.name==’login’){..}next();})

Router.afterEach((to,from)=>{}) 跳轉後調用沒有next方法

組件路有鉤子：

beforeRouteEnter(to,from,next){next(vm=>{...})} 路由跳轉時

注意：此鉤子在beforeCreate以前執行，可是next在組件mounted週期以後,沒法直接調用this訪問組件實例，可用next訪問vm實例，修改數據；

beforeRouteLeave(to,from,next){...next()} 離開路由時

注意：能夠直接訪問this,next不可回調

beforeRouteUpdate 路由切換時

十、vue的4中指令以及用法，v-if條件渲染v-for遍歷數據v-bind綁定屬性v-model實現雙向數據綁定

十一、vue的雙向數據綁定原理是什麼？

<input v-model="sth">

==至關於經過oninput(用戶輸入時觸發)把表單值給到變量

<input v-bind:value="sth" v-on:input="sth=$event.target.value">

 

由於vue是經過Object.defineProperty()來實現數據劫持的。

經過get和set實現雙向數據綁定的。。

 

MVVM，ViewModel經過雙向綁定把View和Model進行同步交互，不須要手動操做DOM的一種設計思想。

MVVM和MVC區別？MVVM和MVC都是一種設計思想，主要就是MVC中的Controller演變成ViewModel,，MVVM主要經過數據來顯示視圖層而不是操做節點，解決了MVC中大量的DOM操做使頁面渲染性能下降，加載速度慢，影響用戶體驗問題。

組件之間傳值

父向子傳值：屬性傳值，父組件經過給子組件標籤上定義屬性，子組件經過props方法接收數據；

子向父傳值：事件傳值，子組件經過$emit(‘自定義事件名’，值)，父組件經過子組件上的@自定義事件名=「函數」接收

非父子組件傳值：全局定義bus，var bus=new Vue() ; 發送者， bus.$emit(‘自定義名’，值) ；接受者，bus.$on(‘自定義名’，(值)=>{})

路由之間傳參

路由字典中：routes={path:’/detail/:id’,component:Detail}

標籤中：<router-link :to=」‘/detail/’+item.id 」>

Js中：this.$route.params.id

五：axios的特色和使用

特色：基於promise的Http庫，支持promise的全部API，用來請求和響應數據的，並且對響應回來的數據自動轉化爲json類型，安全性較高，客戶端支持防護XRSF(跨站請求僞造)，默認不攜帶cookie;

使用：下載包後引入 import axios from ‘axios’ , 讓其攜帶cookie ，axios.defaults.withCredentials=true, 而後添加到prototype中，Vue.prototype.$axios=axios ,組建中不用引入直接使用this.$axios.get(url,{params:{id:1}})。

六：Vuex是什麼？怎麼使用？用於哪些場景？

Vuex是框架中狀態管理；新建目錄store...export,而後main.js引入store再注入到vue實例中；用於購物車，登陸狀態，單頁應用等。

七：Vuex有哪幾種屬性？

五種：state，action，mutation，getter，module

State：數據源存放地，數據是響應式的

Action: 邏輯處理，提交的是mutation,包含任意異步操做

Mutation: 修改state裏的公共數據

Getter: 至關於計算屬性，能夠複用，可緩存

Module: 模塊化

八：Vuex取值

This.$store.state.city

This.$store.commit(‘getData’)

this.$store.dispath(‘getData’)

This.$store.getters.getData