前端常見問題 - vue

Wrightlt發表於2018-05-17
前端Vue

vue的常見指令有哪些

  • v-bild(:)
  • v-on(@)
  • v-if
  • v-else-if
  • v-else
  • v-show
  • v-for
  • v-once
  • v-model
  • v-html

vue中的v-if和v-show的區別

專案 v-show v-if
條件渲染的機制 始終渲染，只是修改元素的display值 根據條件去登出或重建條件塊內的元素、事件、元件等
開銷 更高的初始渲染開銷 更高的切換開銷
  • 注：v-if是惰性的，當初始條件為假時，則什麼也不做，直到條件為真時才開始渲染條件塊

vue中v-on:click阻止冒泡事件

  • v-on:click.stop = yourFunction

vue-router中有哪些鉤子函式

  • beforeRouteUpdate
  • beforeResolve
  • afterEach
  • beforeEnter
  • beforeRouteEnter
  • beforeRouteUpdate
  • beforeRouteLeave

vue中 input 的 value 和 v-model 有什麼異同

  • 相同：隨著data的更改，檢視都會更新
  • 不同：input裡的值被更改後，通過v-model繫結的data裡的資料會改變，通過value繫結的data裡的資料不會改變。
  • 原因：
    • value為input原生屬性，為input的value繫結data中的值後，頁面檢視會隨資料更改而更改，但input輸入框內的值更改後元件的data裡對應的值並不會更改（即value屬於單項繫結）
    • v-model：雙向繫結（vue監測input的input事件，在input事件觸發後更改data中對應的值，從而實現資料的雙向繫結），所以其實v-model就是一種語法糖
    •   <input v-model="test">
  等價於
   <input v-bind:value="test" v-on:input="test=$event.target.value"> 
複製程式碼
  • 在vue中不能同時為input新增以上兩個屬性，會有衝突

元件間的資料傳遞怎麼做

  • 父傳子
    1. slot
    2. props
    3. vuex
  • 子傳父
    1. 自定義事件（$emit）
    2. .sync (語法糖)
    3. vuex
    4. v-model
    5. $refs（在父元件中直接獲取子元件）
  • 任意元件間通訊
    1. bus匯流排（類似於vuex）
    2. vuex

vue的陣列是怎麼實現響應式的

怎麼實現vue-router效果

  • 掘金上有很多這樣的文章，這裡不做贅述，這裡列舉出來這個點是告訴自己這個點需要掌握~~

相關文章