vue2.0的基本特性

本文目前总结的特性如下
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>
    原文作者:someone
    原文地址: https://segmentfault.com/a/1190000016679712
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞