使用vue.js需要注意什麼

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

本文環境：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、元件的使用

、

、等標籤受HTML限制，只允許出現限制的標籤，自訂的元件標籤是無效的。
這時候可以使用is屬性掛載元件

<table>    
    <tbody is="my-component"></tbody>
</table>

渲染時會替換為元件my-component的內容

#：但使用字串模板時，不受限。如.vue檔

7、元件通訊

• 父->子prop

• 子->父親$ emit v-model

相關推薦：js教學

以上是使用vue.js需要注意什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！