vue基礎(chǔ)

$nextTick 的含義

將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它,然后等待 DOM 更新。

vue 組件中的data為什么必須是一個函數(shù)

data 選項必須是一個函數(shù),因此每個實例可以維護(hù)一份被返回對象的獨立的拷貝

assets 和static 目錄的區(qū)別

一般在 static 里放一些類庫的文件,絕對路徑直接引用,assets 里放屬于項目的資源文件。相對路徑。會被 webpack 打包進(jìn)代碼

vue常用的修飾符含義

.stop:阻止事件冒泡
.prevent: 阻止默認(rèn)事件
.capture: 觸發(fā)事件捕獲
.self:當(dāng)事件在該元素本身觸發(fā)回調(diào)
.once: 只執(zhí)行一次

vue和jQuery的區(qū)別

jquery側(cè)重樣式操作,動畫效果等
Vue的數(shù)據(jù)與視圖分離,以數(shù)據(jù)驅(qū)動視圖(只關(guān)心數(shù)據(jù)變化,DOM操作被封裝

delete 和Vue.delete刪除數(shù)組的區(qū)別

delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。
Vue.delete直接刪除了數(shù)組 改變了數(shù)組的鍵值。

Vue-router跳轉(zhuǎn)和location.href有什么區(qū)別

ue-router使用pushState進(jìn)行路由更新,靜態(tài)跳轉(zhuǎn),頁面不會重新加載;location.href會觸發(fā)瀏覽器,頁面重新加載一次

vue slot的作用

Vue2.6 中把普通插槽和作用域插槽給合并了
插槽就是一個返回VNode的函數(shù)而已

v-show 和 v-if指令共同點和不同點

共同點:都是dom渲染
不同點:如果需要非常頻繁地切換,則使用 v-show 較好;如果在運行時條件很少改變,則使用 v-if 較好。v-if如果條件為假則不渲染dom元素

如何讓css只在當(dāng)前組件中起作用

將當(dāng)前組件的<style>修改為<style scoped>

<keep-alive>的作用是什么?

keep-alive用來緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗,
一般用應(yīng)于 選項卡

如何獲取dom

在html元素上設(shè)置ref屬性
在js里面this.$refs

vue的指令以及含義

v-for:基于一個數(shù)組來渲染一個列表
v-html: 更新元素的 innerHTML
v-text: 更新元素的 textContent
v-on: 綁定事件監(jiān)聽器 語法糖@
v-bind:動態(tài)綁定一個或者多個attribute,或一個組件prop到表達(dá)式
v-pre: 不需要表達(dá)式 跳過這個元素和它的子元素的編譯過程
v-cloak: 不需要表達(dá)式 可以隱藏未編譯的 Mustache 標(biāo)簽直到實例準(zhǔn)備完畢

//css
[v-cloak] {
  display: none;
}
//html
<div v-cloak>
  {{ message }}
</div>

v-once: 不需要表達(dá)式 只渲染元素和組件一次

為什么使用key

無:key屬性時,狀態(tài)默認(rèn)綁定的是位置;有:key屬性時,狀態(tài)根據(jù)key的屬性值綁定到了相應(yīng)的數(shù)組元素
key 是為 Vue 中 vnode 的唯一標(biāo)記,通過這個 key,我們的 diff 操作可以更準(zhǔn)確、更快速

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
        }
      })  
//接收參數(shù):
this.$route.query.id
//params傳參: 
this.$router.push({
        name:'xxx',
        params:{
          id:id
        }
      })
  
//接收參數(shù):
this.$route.params.id

params傳參,push里面只能是 name:'xxxx',不能是path:'/xxx',因為params只能用name來引入路由,如果這里寫成了path,接收參數(shù)頁面會是undefined。
使用query傳參的話,會在瀏覽器的url欄看到傳的參數(shù)類似于get請求,使用params傳參的話則不會,類似于post請求

vue初始化頁面閃動問題,看到{{message}}的原因和處理

[v-cloak] {
    display: none;
}

created 和mounted 的區(qū)別

created 階段 可以獲取到Vue中的data和methods中的數(shù)據(jù)
mounted 可以獲取到dom元素進(jìn)行操作

vue獲取數(shù)據(jù)在那個周期函數(shù)

可以在鉤子函數(shù) created、beforeMount、mounted 中進(jìn)行調(diào)用,
ssr 不支持 beforeMount 、mounted 鉤子函數(shù),所以放在 created 中有助于一致性

vue-router是什么? 有哪些組件

路由模塊,主要來實現(xiàn)路由。常用的組件有router-link、router-view

active-class 是哪個組件的屬性

active-class是vue-router模塊的router-link組件中的屬性,用來做選中樣式的切換;

怎么定義vue-router 的動態(tài)路由,怎么獲取傳過來的值

可以通過query,param兩種方式
區(qū)別:query通過url傳參,刷新頁面還在;params刷新頁面不在

route 和router 的區(qū)別

route相當(dāng)于當(dāng)前正在跳轉(zhuǎn)的路由對象。可以從里面獲取name,path,params,query
router為VueRouter的實例,相當(dāng)于一個全局的路由器對象,里面含有很多屬性和子對象

vue-router的兩種模式

  • hash: 使用 URL hash 值來作路由。支持所有瀏覽器,包括不支持 HTML5 History Api 的瀏覽器;
  • history : 依賴 HTML5 History API 和服務(wù)器配置。具體可以查看 HTML5 History 模式;
  • abstract : 支持所有 JavaScript 運行環(huán)境,如 Node.js 服務(wù)器端。如果發(fā)現(xiàn)沒有瀏覽器的 API,路由會自動強制進(jìn)入這個模式.

vuex是什么? 哪種場景使用他

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。

vuex有哪幾種屬性

state getters mutations actions modules

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 相關(guān)概念 混合開發(fā)和前后端分離 混合開發(fā)(服務(wù)器端渲染) 前后端分離后端提供接口,前端開發(fā)界面效果(專注于用戶的交...
    他愛在黑暗中漫游閱讀 3,018評論 4 45
  • ### 什么是Vue.js + Vue.js 是目前最火的一個前端框架,React是最流行的一個前端框架(Reac...
    JLong閱讀 1,343評論 0 0
  • 1、vue的雙向綁定原理是什么 通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式實現(xiàn)的,具體過程如下:實現(xiàn)數(shù)據(jù)雙向綁定,首...
    阿羨吖閱讀 1,052評論 0 13
  • 一、對于MVVM的理解? MVVM 是 Model-View-ViewModel 的縮寫。Model代表數(shù)據(jù)模型,...
    lucky婧閱讀 451評論 0 2
  • 第一天的總結(jié):注意:和js有關(guān)的就寫在(鉤子函數(shù))inseted函數(shù)中去,和CSS樣式有關(guān)的就寫在bind函數(shù)中去...
    MISS彭閱讀 520評論 0 0

友情鏈接更多精彩內(nèi)容