使用vue.js需要注意:1、過濾器主要用于簡單的文本轉換;2、computed和methods的區別;3、key的使用;4、數組的使用;5、組件的使用;6、組件通信。
本文環境:windows10、vue2.9,本文適用于所有品牌的電腦。
(學習視頻分享: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、組件的使用
<table>、<ul>、<ol>、<select>等標簽受HTML限制,只允許出現限制的標簽,自定義的組件標簽是無效的。
這時候可以使用is屬性掛載組件
<table> <tbody is="my-component"></tbody> </table>
<tbody>渲染時會替換為組件my-component的內容
注:但使用字符串模板時,不受限。如.vue文件
7、組件通信
-
父->子 prop
-
子->父 $emit v-model