vue (二) ---- 計算屬性computed,事件修飾符,按鍵修飾符,v-if和v-show,條件渲染指令,其他指令

一.計算屬性 computed

說明: 計算屬性本質也是一個屬性

如何使用:

1. 把計算屬性方法computed
2. 寫起來像一個方法
3. 用起來像一個屬性

特點:

• 計算屬性一定要有返回值,返回值纔是計算屬性最終的結果
• 計算屬性可以使用data裏存在的數據
• (關鍵點)計算屬性只會隨着相關的數據變化而變化,相關的數據一發生變化,計算屬性就會重新計算

注意點:

• 計算屬性一定要有返回值
• 計算屬性不能當方法用
• 計算屬性不能和data裏的數據重名

以後什麼時候使用計算屬性?

1. 想根據已知值(data裏的值)得到一個新值
2. 新值只會隨着相關的數據(已知值)的變化而變化,(其他的值變化的時候計算屬性不會受影響)

二.事件修飾符

1. .prevent   阻止默認行爲
2. .stop        阻止冒泡
3. .capture   捕獲
4. .self         只點擊才觸發
5. .once       只觸發一次
6. passive    過

三.按鍵修飾符(修飾按鍵事件)

.enter   ----->  @keyup.enter='事件函數'

三個階段

1. e.keyCode == 13
2. @keyup.13 =' 函數 '
3. @keyup.enter = ' 函數 '

四.v-if和v-show

• 相同點     都可以顯示與隱藏
• 不同點

1. v-if :顯示就是創建節點   隱藏就是刪除節點
2. v-show: 是利用display:none來控制顯示和隱藏的
3. v-if會影響性能,切換不頻繁的時候可以用v-if,  其他推薦 v-show

五.條件渲染指令

相當於 if  else if   else

1. v-if
2. v-else
3. v-esle

六.其他三個指令

1. v-pre : 不解析
2. v-once   只解析一次
3. v-cloak : 遮蓋   
   1. 給要遮蓋的元素添加v-cloak指令
   2. 通過屬性選擇器找到對用的元素設置dispaly:none
   3. vue會在數據解析完.自動刪除v-cloak指令

七.key(推薦)

以後使用v-for的時候都要加上key    :key='item.id'

就地複印策略   :key = 'index'