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'