我要悄悄的学Vue，然后找一份工作先(3).

这是学习Vue的第三天， 很快的，不知道是不是我觉得这个Vue的语法
感觉很像Django的模板语法一样， 个人感觉很舒服， 都可以直接套过来使用就行了.

条件判断

Vue里面也有条件判断， 这看起来和其他的框架语言是一致的.

1. v-if
   v-if = “表达式/布尔值”
   如果表达式计算为true, 那么dom就会将这个标签渲染出来
   如果表达式计算为false, 那么dom就不会渲染出来
   v-else
   与 v-if 一起用， 用于条件为 false 执行的函数
   v-else-if
   用于第三个选择情况下
   Eg:

<h2 v-if="isTrue">这是对的情况下</h2>
<h2 v-else>这是错的情况下</h2>

2. 使用 key 去管理复用的元素
   比如这个案例:

<h2>登陆小测试</h2>
<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="email" id="email" placeholder="请输入用户邮箱帐号" key="email">
</span>
<button @click="isUser=!isUser">切换登陆方式</button>

个人理解:
  在这2个条件下，如果发生布尔值的变化， Vue内部会就地更新这些东西， 比如说这些 input 标签，
如果不加key值， 那么Vue会选择直接用上面生成的，简单的对比一下属性更新就完事了，如果加了 key，
且这个key得保持唯一性， 那么Vue内部就会进行标签的替换， Vue官网建议我们添加这个key属性，所以
也要加. 而没有添加 key属性的标签会被高效的复用.

3. v-if 和 v-show 的区别
   v-if 根据布尔值来决定是否渲染出来这个标签
   v-show 是更改元素的 display 样式，将其显示还是隐藏.
   如果效果切换很频繁， 推荐使用 v-show 来进行判断， 这样会加快运行的效率
   其他情况下， 我们还是使用v-if进行逻辑判断，然后是否渲染.

循环遍历

同样，Vue里面也是可以循环遍历， 可以遍历的包括数组, 对象…
这个很像 python 的 for…in 遍历
使用场景： 那些标签需要重复n次，那么就在这个标签的第一个里面加上v-for

1. v-for 遍历数组
   num = [1, 2, 3]

- 常规遍历: v-for = "n in num"
- 拿到值和索引值:  v-for = "(n, index) in num"

2. v-for 遍历对象

obj =  {name:"bob", age:14},
- 常规遍历:  v-for = "item  in obj"
- 拿到值和键  v-for = "(item, key) in obj"
- 拿到值，键和索引值  v-for="(item, key, index) in obj"

综合遍历:
obj = [
  {name:"bob", age:14},
  {name:"mary", age:13},
  {name:"Tom", age:12},
]
<ul v-for="item in obj">
  <li v-for="(value, key) in item">{{key}}:{{value}}</li>
</ul>

3. v-for 中绑定 :key 的区别
   个人理解：
   key的作用，同样也是打断Vue的高效复用问题， 如果不加的key属性的话，
   Vue会选择就地更新这些改变的元素， 而不会选择移动元素， 场景一般在Vue管理的数组，
   然后你去操作这个数组， 之后Vue管理的虚拟dom是如果改变的，
   为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素
   ，需要为每项提供一个唯一 key, 这样就会不会就地更新了.

响应式的js数组方法

对数组的操作方法中， 有些是响应式的，就是更改之后页面也会随之变化
记录一下这些方法:

    // 1. push 是响应式的  我们来试试看  (在最后面添加元素)
    // this.letter.push("f");
    // 2. pop  是响应式的 我们来试试看  (删除最后面的元素)
    // this.letter.pop();
    // 3. 通过元素下标操作不是响应式的
    // this.letter[0] = "不是的";
    // 4. shift  是响应式的   (删除最前面的元素)
    // this.letter.shift();
    // 5. unshift 是响应式的，  (在最前面添加元素)
    // this.letter.unshift("I will sit first !");
    // 6.  splice   是响应式的，  而且这个方法 他有三个功能
    //  splice(开始位置， 删除个数， 备选元素)
    // 第一个参数为开始点， 对应索引下标
    // 当第二个参数， 没有的时候， 表示删除功能， 且删除 start 后面所有的
    // 当第二个参数， 有的时候， 且只有第一和第二个参数的时候， 表示删除， 到第二个元素位置
    // 当第二个参数为0的时候， 表示插入， 需要添加第三个参数作为插入的元素， 元素可以多个，逗号隔开
    // 当第二个参数， 有且不为0的时候， 添加第三个参数，且第三个参数长度大于第二个参数， 表示替换， 第三个参数表示替换的元素
    // 替换可以理解为， 先删除， 在添加
    // this.letter.splice(1);
    // this.letter.splice(1, 0, "f", 'g'); // 添加
    // this.letter.splice(1, 2, 'f', 'g')    // 替换 
    // 7. sort  是响应式的， 排序
    // this.letter.sort();
    // 8. reverse 反转数组  也是响应式的
    // this.letter.reverse();
    // 9. 使用Vue内部的一个方法   这个办法是Vue封装在它内部的一个 
    // Vue.set(对象，索引值， 备选的值 )
    //Vue.set(this.letter, 0, "hello world");

js的高级函数-(函数式编程)

好像不仅仅是js中存在这些高阶函数， 在其他语言中， 这些函数也是有的.
这里我跟着老师，再次学习了filter, map, reduce 这些高阶函数

// let num = [1, 2, 3, 4, 5, 6, 7, 8];
// 需求1. 找出这个数组里面所有的偶数
//  常规方法
// let newNum =[];
// for (const n of num) {
//   if(n % 2 ==0){
//     newNum.push(n);
//   }
// }

// 高级函数 filter 方法
// let newNum = num.filter(function(n){
//   return  n % 2 == 0;
// })
// let newNum = num.filter(n => n%2 ==0 );
// console.log(newNum);

// 需求2. 将所有偶数扩大2倍
//  常规方法
// let newNum =[];
// for (const n of num) {
//   if(n % 2 ==0){
//     newNum.push(n * 2);
//   }
// }
// 高级函数 map 的使用
// let newNum = num.map(function(n){return n * 2});

// 需求3. 合计所有数
//  常规方法
// let result = 0;
// for (const n of num) {
//   if(n % 2 ==0){
//     result += n * 2;
//   }
// }
// 高阶函数 reduce 的使用
// let result = num.reduce(function(priValue, n){return priValue + n}, 0)
// console.log(result);

// 合起来使用就是这样的链式   
// let result = num.filter(n => n % 2 == 0).map( n => n ** 2).reduce((priValue, n) => priValue + n ,0);

// let result = num.filter(function(n){
//   return n % 2 == 0
// }).map(function(n){
//   return n ** 2
// }).reduce(function(priValue, n){
//   return priValue + n
// } ,0)

// console.log(result);

包括条件判断，循环遍历，响应式的js数组方法，以及js的高级函数， 最后实现一个小案例，图书商店.

小案例，图书商店

需要这个代码的在下面留言.