哪吒人生信條：如果你所學的東西 處於喜歡 才會有強大的動力支撐。
把你的前端拿捏得死死的，每天學習得爽爽的，如果你所學的東西 處於喜歡 才會有強大的動力支撐。感謝不負每一份熱愛前端的程式設計師，不論前端技能有多奇葩，歡迎關注加我入群vx:xiaoda0423
前言
希望可以通過這篇文章，能夠給你得到幫助。(感謝一鍵三連)
1.h5底部輸入框被鍵盤遮擋問題
如果你遇到h5頁面這個問題，當輸入框在最底部，點選軟鍵盤後輸入框會被遮擋，可以如下解決問題：
var getHeight = $(document).height();
$(window).resize(function(){
if($(document).height() < getHeight) {
$('#footer').css('position','static');
}else {
$('#footer').css('position','absolute');
}
});
2.觸屏即播放
$('html').one('touchstart',function(){
audio.play()
})3.阻止旋轉螢幕時自動調整字型大小
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}4.主流網站佈局
頁面分為3個部分：頁面的頂部header，底部footer，中間部分（側欄side和主要部分main）。
下面程式碼展示：
<body>
// 頁面層容器
<div id="container">
// 頁面頭部
<div id="header"></div>
// 頁面主體
<div id="main">>
// 側邊欄
<div id="side">
</div>
</div>
// 頁面底部
<div id="footer"></div>
</div>
</body>設計頁面樣式程式碼如下：
<style type="text/css">
body{
font: 12px 微軟雅黑;
margin: 0px;
text-align: center;
background: #fff;
}
// 頁面層容器
#container {
width: 100%;
}
#header {
width: 800px;
margin: 0 auto;
height: 100px;
background: #FFCC99;
}
#main {
width: 800px;
margin: 0 auto;
height: 400px;
}
#side {
float: left;
width: 20em;
background: red;
padding: 15px 0;
}
#foot {
width: 800px;
margin: 0 auto;
height: 50px;
background: #00ffff;
}
</style>效果圖如下：
5.什麼是MVVM框架？
MVVM框架是一個Model-View-ViewModel框架，其中ViewModel連線模型Model和檢視View。
在vue.js中的MVVM模式：
vue.js是通過資料驅動的，vue.js例項化物件將dom和資料進行繫結，一旦繫結，dom和資料將保持同步，每當資料發生變化，dom也會隨著變化；ViewModel是Vue.js的核心，它是Vue.js的一個例項。Vue.js會針對某個HTML元素進行例項化，這個HTML元素可以是body，也可以是某個css選擇器所指代的元素。DOM Listeners和Data Bindings是實現雙向繫結的關鍵。DOM Listeners監聽頁面所有View層中的DOM元素，當發生變化時，Model層的資料隨之變化。Data Bindings會監聽Model層的資料，當資料發生變化時，View層的DOM元素也隨之變化。
6.active-class是哪個元件的屬性
它是vue-router模組的router-link元件的屬性
7.如何定義vue-router的動態路由
在靜態路由名稱前面新增冒號，如設定id動態路由引數，為路由物件的path屬性設定/:id
8.如何獲取傳過來的動態引數
在元件中，使用$router物件的params.id，如$route.params.id
9.vue-router有哪幾種導航的鉤子
有三種，第一種是全域性導航鉤子，router.beforeEach(to,from,next)，作用是跳轉前進行判斷攔截；第二種是元件內的鉤子；第三種是單獨路由獨享元件。
導航鉤子又叫導航守衛，又分為全域性鉤子，單個路由獨享鉤子和元件級鉤子。
全域性鉤子有beforeEach,beforeResolve,afterEach，單個路由獨享鉤子有：beforeEnter
元件級鉤子有：beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave：它們有以下引數：
to表示即將要進入的目標路由物件；from表示當前導航正要離開的路由；next表示一定要用這個函式才能到達下一個路由，如果不用就會遭到攔截。
10.mint-ui是什麼
mint-ui它是基於Vue.js的前端元件庫，用npm安裝，然後通過import匯入樣式和JavaScript程式碼，vue.use(mintUi)用於實現全域性引入，import {Toast} from 'mint-ui'用能於在單個元件區域性引入
11.v-model是什麼
v-model是vue.js的一條指令，實現資料的雙向繫結
雙向資料繫結的原理：
vue.js使用es5提供的屬性特性功能，結合釋出者-訂閱者模式，通過Object.defineProperty()為各個屬性定義get,set特性方法，在資料傳送改變時給訂閱者釋出訊息，觸發相應的監聽回撥。
過程：a，對需要觀察的資料物件進行遞迴遍歷，包含子屬性物件的屬性，設定set和get特性方法；當給這個物件的某個值賦值時，會觸發繫結的set特性方法，就能起到監聽資料的變化。b，用compile解析模板指令，將模板中的變數替換成資料，然後初始化渲染頁面檢視，並將每個指令對應的節點繫結更新函式，新增監聽資料的訂閱者，一旦資料有變動，就會收到通知，並更新檢視。c，Watcher訂閱者是Observer和Compile之間通訊的橋樑：在自身例項化時向屬性訂閱器dep裡面新增自己；自身必須有一個update()方法；在dep.notice()釋出通知時，能呼叫自身的update()方法，並觸發Compile中繫結的回撥函式。d，MVVM是資料繫結的入口，整合了Observer，Compile和Wathcher三者，通過Observer來監聽自己的model資料變化，通過Compile來解析編譯模板指令，最終利用Watcher來搭起Observer和Compile之間的通訊橋樑，達到資料變化通知檢視更新的效果，利用檢視互動，變化更新資料model變更的雙向繫結效果。
12.vue.js中標籤如何繫結事件
第一種方式，使用v-on；第二種方式，使用@語法糖
13.vuex是什麼
vuex是vue.js框架實現的狀態管理系統。使用vuex，要引入store，並注入vue.js元件中，在元件內部可以通過$store訪問store物件；使用場景，在單頁應用中，用於元件之間的通訊，如音樂播放，登入狀態管理，加入購物車等
vuex可以說是一種開發模式或框架，它是對vue.js框架資料層面的擴充套件，通過狀態集中管理驅動元件的變化，應用的狀態集中放在store中，改變狀態的方式是提交mutations，這是個同步的事務，非同步的邏輯應該封裝在action中。
14.在vue中說說你知道的自定義指令
自定義指令兩種：一種全域性自定義指令，vue.js物件提供了directive方法，可以用來自定義指令，directive方法接收兩個引數，一個是指令名稱，另一個是函式；第二種是區域性自定義指令，通過元件的directives屬性定義。
15.vue.js中常用的4種指令
v-if判斷物件是否隱藏；v-for迴圈渲染；v-bind繫結一個屬性；v-model實現資料雙向繫結
在v-if迴圈中實現v-model資料的雙向繫結：
有時需要建立input，並用v-model實現資料的雙向繫結。此時可以為v-model繫結陣列的一個成語selected[$index]，這樣可以給不同的input繫結不同的v-model:
<div v-for="(item,index) in arrDa">
<input type="text" v-model="arrData[index]">
<h1>{{arrDa[index]}}</h1>
</div>16.vue-router是什麼
vue-router是vue.js的路由外掛，（常用router-link和router-view）
17.vue.js的生命週期
共分8個階段：
beforeCreate
在例項初始化之後，資料觀測者data observer和event/watcher事件配置之前呼叫
created
在例項建立完成後立即呼叫，此時，例項已完成：觀測者，屬性和方法的運算，watch/event事件回撥，掛載階段還沒開始，$el屬性目前不可見。
beforeMount
在掛載開始之前呼叫，相關的render函式首次呼叫。mounted
el被新建立的vm.$el替換，並且在掛載到例項上之後再呼叫該鉤。如果root例項掛載了一個文件內元素，當呼叫mounted時vm.$el也在文件內。
beforeUpdate
在資料更新時呼叫，發生在虛擬dom重新渲染和打補丁之前。updated
由於資料更改導致的虛擬dom重新渲染和打補丁，在這之後會呼叫該鉤子。beforeDestroyed
在例項銷燬之前呼叫，在這一步，例項仍然完全可用。
destroyed
在vue.js例項銷燬後呼叫，vue.js例項指示的所有東西都會解除繫結，所有的事件監聽會被移除，所有的子例項也會被銷燬。
如果使用元件的keep-alive功能時，增加兩個週期：
activated在keep-alive元件啟用時呼叫；deactivated在keep-alive元件停用時呼叫。
<keep-alive>包裹動態元件時，會快取不活動的元件例項，而不是銷燬它們。<keep-alive>是一個抽象元件，它自身不會渲染一個DOM元素，也不會出現在父元件鏈中。
當在<keep-alive>內切換元件時，它的activated和deactivated這兩個生命週期鉤子函式將會執行。
<keep-alive>
<component :is="view"></component>
</keep-alive>增加一個週期鉤子：ErrorCaptured表示當捕獲一個來自子孫元件的錯誤時呼叫。
18.描述封裝vue元件的作用過程
元件可以提升整個專案的開發效率，能夠把頁面抽象成多個相對獨立的模組，解決了傳統專案開發中效率低，難維護，複用性等問題。
使用Vue.extend方法建立一個元件，使用Vue.component方法註冊元件，子元件需要資料，可以在props中接收資料，而子元件修改好資料後，想要把資料傳遞給父元件，可以使用emit方法。
使用自定義元件：
在components目錄中新建元件檔案，指令碼一定要匯出暴露的介面；匯入需要用到的頁面；將匯入的元件注入vue.js的子元件的components屬性中；在template的檢視中使用自定義元件。
建立元件
<div id="app">
<dada></dada>
</div>
<template id="demo">
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script type="text/javascript">
// 定義元件類
var dada = Vue.extend({
template: '#demo',
data:function() {
return {
msg: 'dadaqianduan.cn'
}
}
})
// 註冊元件
Vue.component('dada',dada);
// 定義Vue例項化物件
var app = new Vue({
el: '#app',
data: {}
})
</script>19.vue-loader是什麼
vue-loader它是解析.vue檔案的一個載入器，將template/js/style轉換成javascript模組；通過這個vue-loader，javascript可以寫EMAScript6語法，style樣式可以應用scss或less，template可以新增jade語法。。。
20.在vue.cli專案中的src目錄說明
assets資料夾存放靜態資源;components存放元件;router定義路由相關的配置;view是檢視;app.vue是一個應用主元件;main.js是入口檔案。
21.對vue.js的template編譯的理解
首先轉化成AST抽象語法樹，Abstract Syntax Tree，就是將原始碼語法結構抽象成樹狀表現形式，然後通過render函式進行渲染，並返回VNode（Vue.js的虛擬dom節點）。
通過compile編譯器把template編譯成AST，compile是createCompiler的返回值，createCompiler用來建立編譯器，compile還負責合併option；AST會經過generate-將AST轉換成render function字串的過程-得到render函式，render的返回值是VNode，VNode是Vue.js的虛擬DOM節點，裡面有標籤名，子節點，文字等。
22.v-show指令和v-if指令的區別
它們都是條件渲染指令，不同的是，v-show的值無論是true或false元素都會存在於html頁面中，而v-if的值為true時，元素才會存在於html頁面中。
v-show指令是通過修改元素的style屬性值實現的。
23.讓css只在當前元件中起作用
只需要在style標籤中新增scoped屬性，<style scoped></style>
24.在vue.js中如何實現路由巢狀
路由巢狀會將其他元件渲染到該元件內，而不是使整個頁面跳轉到router-view定義元件渲染的位置，要進行頁面跳轉，要將頁面渲染到根元件內。首先例項化根元件，在根元件中定義元件渲染容器，然後，掛載路由，當切換路由時，將會切換整個頁面。
new Vue({
el: '#dada',
router: router,
template: '<router-view></router-view>'
})25.在vue.js中的ref屬性有什麼作用
可以直接訪問元件內部的一些元素，定義屬性可以在元件內部通過this.$refs屬性，，訪問設定ref屬性的元素，這是一個原生的DOM元素，要使用原生DOM API操作它們。
26.在vue.js開發環境下呼叫介面，如何避免跨域
在config/index.js內對proxyTable項進行如下配置：
proxyTable: {
'/api': {
target: 'http://xxx.com',
changeOrign: true,
pathRewrite: {
'^/api': ''
}
}
}27.axios是什麼
axios是vue2.0中用來替換vue-resource.js外掛的一個模組，是一個請求後臺資源的模組
使用npm install axios來安裝axios
import Vue from 'vue'
import axios from 'axios';
Vue.prototype.$http = axios;
new Vue({
el: 'dada',
data: {
mag: ''
},
template: '<h1>{{msg}}</h1>',
created: function() {
this.$http.get('data.json').then(res=>{
this.msg = res.data.data
})
}
})當呼叫axios.post('api/user')時，表示傳送post非同步請求。
28.sass是什麼
sass是一種css預編譯語言，用npm安裝載入程式；在webpack.config.js中配置sass載入程式
module: {
// 載入程式
loaders: {
// 載入scss
{
test: /\.scss$/,
loader: 'vue-style-loader!css-loader!sass-loader'
}
}
}29.什麼情況下會產生片段例項
模板包含多個頂級元素；模板只包含普通文字；模板只包含其他元件，模板只包含一個元素指令，如vue-router的<router-view>；模板根節點有一個流程 控制指令，如v-if或v-for
這些情況讓例項有未知數量的頂級元素，模板將把它的DOM內容當作片段。片段例項仍然會正確地渲染內容。不過，模板沒有一個根節點，它的$el指向一個錨節點，即一個空的文字節點。
在vue2.0中，元件的模板只允許有權只有一個根節點。30. 實現多個根據不同條件顯示不同文字的方法
<div id="app">
<input type="text" v-model="inputValue">
<h1>{{showValue}}</h1>
</div>
var app = new Vue({
el: '#app',
data: {
inputValue: ''
},
computed: {
showValue: function() {
return this.inputValue || '請輸入內容'
}
}
})31.什麼是資料的丟失
如果在初始化時沒有定義資料，之後更新的資料是無法觸發頁面渲染更新的，這部分資料是丟失的資料，這種現象叫資料的丟失。
32.如何檢測資料的變化
- 通過直接索引設定元素：
app.arr[0]= - 修改資料的長度：
app.arr.length
為了解決該問題，Vue.js擴充套件了觀察陣列，為它新增了一個$set()方法，用該方法修改的陣列，能觸發檢視更新，檢測資料變化。
app.$set(app.arr, 5, 500);由於javascript特性的限制，vue.js不能檢測到物件屬性的新增或刪除，因為Vue.js在初始化時將陣列轉化為getter/setter，所以屬性必須在data物件中定義，才能在初始化時讓vue.js轉換它並讓它響應。
var data = {
obj: {
a: 1
}
}
var app = new Vue({
el: '#app',
data: data
})
app.ojb.a = 10
app.obj.b = 20 // 不是響應的
data.obj.b = 20 // 不是響應的如果需要在例項建立之後新增屬性並且讓它能夠響應，使用$set例項方法：
app.$set(app.obj, 'b', 200)對於普通資料物件，可以全域性方法Vue.set(object,key,value)
Vue.set(data.obj, 'b', 250)33.vue.js檔案中的樣式覆蓋不生效的問題
在style上加上scoped可以讓樣式私有化，只針對當前vue.js檔案中的程式碼有效，不會對別的檔案中的程式碼造成影響，有時，引入第三方UI，在vue.js檔案中進行樣式覆蓋不生效，大概是因為style上的scoped導致的。
可以將需要覆蓋樣式的這部分程式碼放到單獨的css檔案中，在main.js檔案匯入即可。
34.如何解決資料層級結構太深
在開發中，常出現非同步獲取資料的情況，有時資料層次太深，如：
<text v-text="a.b.c.d"></text>可以使用vm.$set手動定義一層資料：vm.$set("dada", a.b.c.d)
35.vue.js頁面的閃爍
在vue.js有一個v-cloak指令，該指令一直保持在元素上，直到關聯例項結束編譯。當和css使用時，這個指令可以隱藏未編譯的標籤，直到例項編譯結束：<div>不會顯示，直到編譯結束。
[v-cloak] {
display: none;
}
<div v-cloak>{{dada}}</div>點贊、收藏和評論
我是Jeskson(達達前端)，感謝各位人才的：點贊、收藏和評論，我們下期見！(如本文內容有地方講解有誤，歡迎指出☞謝謝，一起學習了)
我們下期見！
文章持續更新，本文 http://www.dadaqianduan.cn/#/ 已經收錄github收錄，歡迎Star：https://github.com/webVueBlog/WebFamily