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>
回覆“加羣”與大佬們一起交流學習~
點擊“閱讀原文”查看 120+ 篇原創文章
本文分享自微信公衆號 - 前端自習課(FE-study)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。