本文目前总结的特性如下
1.侦听属性和计算属性
2.class的绑定
3.条件渲染时的注意事项
4.v-if和v-for同时使用的注意事项
5.插槽
6.ref,父组件调用子组件的另一种方式
7.<keep-alive>标签
侦听属性和计算属性
计算属性computed
假设有A、B两个变量,B的值依赖于A,B=A的平方
<p>A的值:{{A}}</p>
<p>A的平方:{{B}}</p>
//B的值依赖于A,当A发生改变时B也会改变
computed:{
B(){
//这个方法在A发生改变时会触发,返回值传给B
return A*A
}
}
当计算很简单的时候,可以直接使用{{A*A}}来代替计算属性。
可是当计算变得逻辑变得复杂时,如果嵌套在template的表达式并不适用于这种方法,而且这样会使代码的可读性变差,难以维护
而且使用计算属性是有缓存的,只有当A发生改变时,才会再次触发
watch侦听属性
watch的功能computed类似,watch的方法在监听的属性改变时触发
watch:{
A(){
this.B = A*A;
}
}
class的动态修改
当一个元素的样式需要根据数据来动态改变时,使用:class属性
<div :class=”{类名:变量}”></div>,类名是否存在取决于变量值是否为真
当元素有多个样式时:
<div :class=”[‘类1’,{‘类名2’:变量2}]”>
类名也可以用计算属性来监听:
isEnoug为true,class=”cartLeast unEmpty” 否则class=”cartLeast”
<div :class=”classObj”></div>
computed:{
classObj(){
let classArr = [‘cartLeast’];
if(this.isEnough){
classArr.push('unEmpty');
}
return classArr;
}
}
在引用组件的时候增加class,这是组件child的类名有a,b两个
<template><div class=”a”></div></template>
<child class=”b”></child>
条件渲染时的注意事项
vue为了高性能渲染,一般会复用已渲染过的标签。
假如有一个登录框,根据选择的登录方式切换input,一个是手机登录,一个是邮箱登录。因为vue会复用原来已有的input,所以当你切换到邮箱登录时,input里还会保存有手机登录时的内容,这显然是不符合条件的。
通过在input上添加key可以区别元素
<div class="" v-if="isSeen">
<input type="text" name="" value="" placeholder="enter a" key="a">
</div>
<div class="" v-else>
<input type="text" name="" value="" placeholder="enter b" key="b">
</div>
<div class="" @click="isSeen=!isSeen">
toggle
</div>
data:{
isSeen:true
}
当同时使用v-for和v-if的注意事项
v-for的优先级是高于v-if的,当只需要渲染满足一些特点条件的元素时,是很有效的
但是当需要全部渲染时,把v-if放在外面
<div v-if="{{a}}"><div v-for="item in list"></div></div>