首頁 > web前端 > Vue.js > 使用vue.js需要注意什麼

使用vue.js需要注意什麼

王林
發布: 2021-01-07 17:31:59
原創
9728 人瀏覽過

使用vue.js需要注意:1、過濾器主要用於簡單的文字轉換;2、computed和methods的區別;3、key的使用;4、數組的使用;5、組件的使用;6、組件通信。

使用vue.js需要注意什麼

本文環境:windows10、vue2.9,Dell G3電腦。

(學習影片分享:javascript影片教學

使用vue.js需要注意以下問題:

1、濾鏡主要用於簡單的文字轉換,如果要實現複雜的資料變換,則應使用計算屬性

2、指令的使用

  • v-bind基本上用於HTML元素上的屬性,如id、class、href、src等

  • v-on用來綁定事件監聽器,如click、dblclick、keyup、mousemove等,method內的this指向的是目前Vue實例

  • v-show不能使用在template上

  • - v-if 和 v-show使用情境

  • #v-if 條件為false則不會編譯渲染元素。 v-show只是簡單的CSS屬性切換,無論true/false,都會編譯。 v-if適合條件不常改變的場景v-show適用頻繁切換條件

3、computed和methods的區別

  • methods有括號(),computed不帶括號。

  • computed是基於它的依賴緩存,只有相關依賴發生改變時才會重新取值。

  • methods在重新渲染的時候,函數總是會重新呼叫執行。

4、key的使用

Vue渲染元素時,考慮效率,會盡可能重複使用現有的元素。此時需要在被重複使用的元素加上key屬性

<input key="go">
登入後複製

5、陣列的使用

  • filter()、concat()、slice()不會更改原數組,將傳回一個新數組

  • 用新數組取代原始數組,無效能影響。 Vue渲染時,會盡量重複使用DOM元素

    部分陣列變動無法被Vue偵測到,並更新視圖

  • app.books[3]={}app .books.length=1以上情況可以分別使用Vue.set和app.books.splice(1)處理

6、元件的使用