使用vue.js需要注意哪些事項

這篇文章主要介紹了使用vue.js需要注意哪些事項，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

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

使用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、組件的使用

<table>、<ul>、<ol>、<select>等標簽受HTML限制，只允許出現限制的標簽，自定義的組件標簽是無效的。
這時候可以使用is屬性掛載組件

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

<tbody>渲染時會替換為組件my-component的內容

注：但使用字符串模板時，不受限。如.vue文件

7、組件通信

• 父->子 prop

• 子->父 $emit v-model

感謝你能夠認真閱讀完這篇文章，希望小編分享使用vue.js需要注意哪些事項內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!