VUE学习总结(二)

1、计算属性

  • 双向绑定的数据表达式如果过长,则将计算属性已函数的形式写在Vue实例中的computed选项内。

  • 每一个计算属性都包含一个getter(读取)和setter(写入),默认getter。

computerd:{
	get:function(){
	...
	}
	set:function(newValue){
	...
	}
}
  • 两个实用小技巧
    计算属性可以依赖其他计算属性;计算属性可以依赖其他实例的数据。
  • 使用method可以代替computed,但是计算属性依赖于缓存,当其所依赖数据发生变化时,会从新取值计算;而method不同,只要被重新渲染,函数就会被执行。

2、class绑定
data\computed\methods,表达式较长或逻辑复杂,优先使用computed。

  • 对象语法
//实例data中给出 isActive /isError的值
<div class="static" :class="{ 'active' : isActive , 'error': isError }"></div>

class条件过多时(超过两个),也可以绑定计算属性,这是一种很友好并且常见的方式。

  • 数组语法
//实例data中给出 activeCls /errorCls分别表示哪个类名
<div class="static" :class="[activeCls , errorCls]"></div>
//三元表达式
<div class="static" :class="[isActive ?activeCls :‘’ , errorCls]"></div>
//数组语法中使用对象语法
<div class="static" :class="[ { 'active' : isActive } , errorCls]"></div>

3、style绑定
与class绑定相似,由于直接写一长串不便于阅读维护,一般写在data或computed里。

4、
Vue在渲染元素时,出于效率考虑,会尽可能复用已有元素,但如果给标签加上key值,就不会被复用了,key的值必须是唯一的。

5、
v-for中n in 10,打印结果是1~10。
6、
vue的核心是数据与视图的双向绑定,当修改数组时,vue检测到数据变化,视图也会立即更新。push() , pop() , shift() , unshift() , splice() , sort() , reverse()。
有些方法返回新数组,不会改变原数组,则不会触发更新,filter() , concat() , slice()。
有些变动,vue检测不到:通过索引设置项app.books[3]= {…};修改数组长度,这两种都不会触发视图更新。
在计算属性中对数据进行过滤或排序,返回的是新数组,不修改原数据。
6、
vue提供特殊变量可以阻止链接打开。

$event.preventDault();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值