关于Vue的学习笔记（六）

关于Vue的一些基本参数、方法及其应用规则

Vue的对象增强写法

ES6中，对对象自变量进行了很多增强，属性初始化与方法的简写与对比如下

//ES6之前
  let name = 'why'
  let age = 18
  let obj1 = {
    name: name,
    age: age,
    test: function () {
      console.log('obj1的test函数')
    }
  }
  console.log(obj1);
  //ES6之后
  let obj2 = {
    name,age,
    test() {
      console.log('obj2的test函数')
    }
  }

对象增强的写法简化了代码的编写，让代码的说明性变得更强。

 

v-if、v-else-if、v-else

这三个指令与javascript的条件语句if、else、else if类似，Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。

v-if的原理：v-if后面的条件为false时，对应的元素以及其子元素不会渲染，也就是根本不会有对应的标签出现在DOM中。

以学生成绩分级为例，如下：

<div id="app">
  <p v-if="score>=90">优秀</p>
  <p v-else-if="score>=80">良好</p>
  <p v-else-if="score>=60">及格</p>
  <p v-else>不及格</p>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data:{
      score: 98
    },
    methods:{

    }
  })
</script>

当成绩高于90（包括90）被评为优秀，高于80（包括80）评为良好，高于60（包括60）评为及格，而以上条件都未被筛选则评为不及格。

但v-if更多做的是针对DOM中组件有条件地进行渲染，下面是一个关于用户通过切换邮箱和账号登录的条件渲染案例：

<div id="app">
  <span v-if="isUser">
    <label  for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号" key="username">
  </span>
  <span v-else>
    <label  for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="用户邮箱" key="email">
  </span>
  <button @click="isUser = !isUser">切换类型</button>
</div>

<script src = "../JS/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data:{
      isUser: true
    },
    methods:{

    }
  })
</script>

关于div中为何给input增加不同的key属性

Vue在进行DOM渲染时，出于对性能的考虑，会尽可能的复用已经存在的元素而不是重新创建新的元素。在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。因此如果不未input添加不同的key的话，Vue的重复利用会导致我们切换登录方式，但输入框却保持着切换前输入的数据，这样对安全性还是使用观感都不太友好。

 

v-show与v-if

v-show的用法与v-if非常相似，也用于决定一个元素是否渲染。

v-if与v-show的对比与选择

区别：v-if当条件判断为false时，压根不会有对应的元素在DOM中；而v-show当条件为false时，仅仅是将元素的display属性设置为none而已。

在开发中，当需要在显示与隐藏之间切片很频繁时，使用v-show；当只有一次切换时，通过使用v-if。但是实际开发中，我们多通过动态地从后台抓取数据决定DOM中元素的显示与隐藏，因此v-if多被使用。