vue基礎

$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刷新頁面不在

route 和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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末野舶,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子宰衙,更是在濱河造成了極大的恐慌平道,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,290評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件供炼,死亡現場離奇詭異一屋,居然都是意外死亡窘疮,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 90,107評論 2 385
  • 文/潘曉璐 我一進店門冀墨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來闸衫,“玉大人,你說我怎么就攤上這事诽嘉∥党觯” “怎么了?”我有些...
    開封第一講書人閱讀 156,872評論 0 347
  • 文/不壞的土叔 我叫張陵虫腋,是天一觀的道長骄酗。 經常有香客問我,道長悦冀,這世上最難降的妖魔是什么趋翻? 我笑而不...
    開封第一講書人閱讀 56,415評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮盒蟆,結果婚禮上踏烙,老公的妹妹穿的比我還像新娘。我一直安慰自己历等,他們只是感情好讨惩,可當我...
    茶點故事閱讀 65,453評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著募闲,像睡著了一般步脓。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上浩螺,一...
    開封第一講書人閱讀 49,784評論 1 290
  • 那天,我揣著相機與錄音仍侥,去河邊找鬼要出。 笑死,一個胖子當著我的面吹牛农渊,可吹牛的內容都是我干的患蹂。 我是一名探鬼主播,決...
    沈念sama閱讀 38,927評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼砸紊,長吁一口氣:“原來是場噩夢啊……” “哼传于!你這毒婦竟也來了?” 一聲冷哼從身側響起醉顽,我...
    開封第一講書人閱讀 37,691評論 0 266
  • 序言:老撾萬榮一對情侶失蹤沼溜,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后游添,有當地人在樹林里發(fā)現了一具尸體系草,經...
    沈念sama閱讀 44,137評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡通熄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,472評論 2 326
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了找都。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片唇辨。...
    茶點故事閱讀 38,622評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖能耻,靈堂內的尸體忽然破棺而出赏枚,到底是詐尸還是另有隱情,我是刑警寧澤晓猛,帶...
    沈念sama閱讀 34,289評論 4 329
  • 正文 年R本政府宣布饿幅,位于F島的核電站,受9級特大地震影響鞍帝,放射性物質發(fā)生泄漏诫睬。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,887評論 3 312
  • 文/蒙蒙 一帕涌、第九天 我趴在偏房一處隱蔽的房頂上張望摄凡。 院中可真熱鬧,春花似錦蚓曼、人聲如沸亲澡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽床绪。三九已至,卻和暖如春其弊,著一層夾襖步出監(jiān)牢的瞬間癞己,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工梭伐, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留痹雅,地道東北人。 一個月前我還...
    沈念sama閱讀 46,316評論 2 360
  • 正文 我出身青樓糊识,卻偏偏與公主長得像绩社,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子赂苗,可洞房花燭夜當晚...
    茶點故事閱讀 43,490評論 2 348

推薦閱讀更多精彩內容

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