vue 基础指令记录

1. Vue 中的 真值 , 代表一切显示为真的值(不单单只是指true);
2. v-if 是一个语句 , 所以只能添加在一个元素上 , 如果现根据条件渲染多个元素 , 可以使用一个template标签包裹起来
3. v-else 指令必须紧跟在v-if 或者是 v-else-if的后面 不然是不会被是识别的
4. vue 中会尽可能高效的渲染元素,通常会复用已有的元素,而不是从头开始,
   但是如果需要允许用户可以切换登录的方式 , 那么

<!-- 
vue 会高效的复用已有的元素,而不是从头开始 , 如下面的例子,只有input的placeholder 是不一样的 , 其他的所有的都是复用的 ,包括input的value值 , 在点击了切换登录方式之后 ,value的值并不会变化 ,
--> 

<template v-if="loginType">
    <label>Username</label>
    <input placeholder="Enter your username" >
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address">
  </template>

<!-- 
由于vue 提供的key属性表达了这两个元素(input)是完全独立的,不可以复用他们 , 但是lable还是可以复用的 , 没有key属性
-->

   <template v-if="loginType">
    <label>Username</label>
    <input placeholder="Enter your username" key="USER">
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address" key="EMAIL">
  </template>

5. v-show 虽然也是根据条件判断元素的显示与隐藏 , 但是啊只是单纯的修改元素的display属性 , 不支持多个元素的template 标签
6. 总结 :
   v-if 是真正的条件渲染 , 因为他会确保在切换的过程中条件快内的时间监听器和子组件适当的被销毁和重建
   v-if 是惰性的 , 如果在出事渲染是条件是假的 , 则什么都不会做,一直到第一次条件为真时,才会开始渲染条件快
   相比之下 , v-show 就简单的多,不管条件是什么 , 元素总是会被渲染,并且只是简单的基于css样式进行切换
   一般来说,v-if 有更高的切换开销 , 而v-show 有更好的渲染开销,因此如果需要频繁的切换 ,则使用v-show比较好,如果在运行的时候条件很少改变,则使用v-if 比较好