$nextTick 的含義
將回調延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數據之后立即使用它舆瘪,然后等待 DOM 更新。
vue 組件中的data為什么必須是一個函數
data 選項必須是一個函數,因此每個實例可以維護一份被返回對象的獨立的拷貝
assets 和static 目錄的區(qū)別
一般在 static 里放一些類庫的文件,絕對路徑直接引用躲因,assets 里放屬于項目的資源文件。相對路徑忌傻。會被 webpack 打包進代碼
vue常用的修飾符含義
.stop:阻止事件冒泡
.prevent: 阻止默認事件
.capture: 觸發(fā)事件捕獲
.self:當事件在該元素本身觸發(fā)回調
.once: 只執(zhí)行一次
vue和jQuery的區(qū)別
jquery側重樣式操作大脉,動畫效果等
Vue的數據與視圖分離,以數據驅動視圖(只關心數據變化水孩,DOM操作被封裝
delete 和Vue.delete刪除數組的區(qū)別
delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變镰矿。
Vue.delete直接刪除了數組 改變了數組的鍵值。
Vue-router跳轉和location.href有什么區(qū)別
ue-router使用pushState進行路由更新荷愕,靜態(tài)跳轉衡怀,頁面不會重新加載;location.href會觸發(fā)瀏覽器安疗,頁面重新加載一次
vue slot的作用
Vue2.6 中把普通插槽和作用域插槽給合并了
插槽就是一個返回VNode的函數而已
v-show 和 v-if指令共同點和不同點
共同點:都是dom渲染
不同點:如果需要非常頻繁地切換,則使用 v-show 較好够委;如果在運行時條件很少改變荐类,則使用 v-if 較好。v-if如果條件為假則不渲染dom元素
如何讓css只在當前組件中起作用
將當前組件的<style>修改為<style scoped>
<keep-alive>的作用是什么茁帽?
keep-alive用來緩存組件,避免多次加載相應的組件,減少性能消耗玉罐,
一般用應于 選項卡
如何獲取dom
在html元素上設置ref屬性
在js里面this.$refs
vue的指令以及含義
v-for:基于一個數組來渲染一個列表
v-html: 更新元素的 innerHTML
v-text: 更新元素的 textContent
v-on: 綁定事件監(jiān)聽器 語法糖@
v-bind:動態(tài)綁定一個或者多個attribute,或一個組件prop到表達式
v-pre: 不需要表達式 跳過這個元素和它的子元素的編譯過程
v-cloak: 不需要表達式 可以隱藏未編譯的 Mustache 標簽直到實例準備完畢
//css
[v-cloak] {
display: none;
}
//html
<div v-cloak>
{{ message }}
</div>
v-once: 不需要表達式 只渲染元素和組件一次
為什么使用key
無:key屬性時潘拨,狀態(tài)默認綁定的是位置吊输;有:key屬性時,狀態(tài)根據key的屬性值綁定到了相應的數組元素
key 是為 Vue 中 vnode 的唯一標記铁追,通過這個 key季蚂,我們的 diff 操作可以更準確、更快速
v-model是哪兩個指令的語法糖
<input
v-bind:value="something"
v-on:input="something = $event.target.value">
分別簡述computed和watch的使用場景
computed 是計算屬性琅束,有緩存 可以獲取多個值輸出一個
watch 是監(jiān)聽一個影響多個
v-on可以監(jiān)聽多個事件的寫法
<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur}">//可以正常執(zhí)行不同方法
<div v-on="{ mousedown:onInput,mouseup:onFocus,mouseenter:onBlur}" >盒子</div>
//可以正常執(zhí)行不同方法
<div v-on="{click:onInput,click:onFocus,click:onBlur}">盒子</div>
//綁定多個相同事件扭屁,只執(zhí)行最后一個方法
<div @click="{onInput,onFocus,onBlur}">盒子</div>
//這樣綁定無效
params和query的區(qū)別
//query傳參:
this.$router.push({
path:'/xxx',
query:{
id:id
}
})
//接收參數:
this.$route.query.id
//params傳參:
this.$router.push({
name:'xxx',
params:{
id:id
}
})
//接收參數:
this.$route.params.id
params傳參,push里面只能是 name:'xxxx'涩禀,不能是path:'/xxx'料滥,因為params只能用name來引入路由,如果這里寫成了path艾船,接收參數頁面會是undefined葵腹。
使用query傳參的話高每,會在瀏覽器的url欄看到傳的參數類似于get請求,使用params傳參的話則不會践宴,類似于post請求
vue初始化頁面閃動問題觉义,看到{{message}}的原因和處理
[v-cloak] {
display: none;
}
created 和mounted 的區(qū)別
created 階段 可以獲取到Vue中的data和methods中的數據
mounted 可以獲取到dom元素進行操作
vue獲取數據在那個周期函數
可以在鉤子函數 created、beforeMount浴井、mounted 中進行調用晒骇,
ssr 不支持 beforeMount 、mounted 鉤子函數磺浙,所以放在 created 中有助于一致性
vue-router是什么洪囤? 有哪些組件
路由模塊,主要來實現路由撕氧。常用的組件有router-link瘤缩、router-view
active-class 是哪個組件的屬性
active-class是vue-router模塊的router-link組件中的屬性,用來做選中樣式的切換伦泥;
怎么定義vue-router 的動態(tài)路由剥啤,怎么獲取傳過來的值
可以通過query,param兩種方式
區(qū)別:query通過url傳參不脯,刷新頁面還在府怯;params刷新頁面不在
router 的區(qū)別
route相當于當前正在跳轉的路由對象》揽可以從里面獲取name,path,params,query
router為VueRouter的實例牺丙,相當于一個全局的路由器對象,里面含有很多屬性和子對象
vue-router的兩種模式
- hash: 使用 URL hash 值來作路由复局。支持所有瀏覽器冲簿,包括不支持 HTML5 History Api 的瀏覽器;
- history : 依賴 HTML5 History API 和服務器配置亿昏。具體可以查看 HTML5 History 模式峦剔;
- abstract : 支持所有 JavaScript 運行環(huán)境,如 Node.js 服務器端角钩。如果發(fā)現沒有瀏覽器的 API吝沫,路由會自動強制進入這個模式.
vuex是什么? 哪種場景使用他
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式彤断。
vuex有哪幾種屬性
state getters mutations actions modules