Vue 学习笔记 [Part 2]

作者: 故事我忘了^￠
个人微信公众号: 程序猿的月光宝盒

---

一. 计算属性

1.1. 计算属性的本质

• 每个计算属性都包含一个getter和一个setter

• 一般情况下我们写的都是getter方法

• 在某些情况下，你也可以提供一个setter方法（不常用）

• 在需要写setter的时候，代码如下

  

1.2. 计算属性和methods对比

methods和computed看起来都可以实现我们的功能，

那么为什么还要多一个计算属性这个东西呢？

原因：

• 计算属性在多次使用时, 只会调用一次.

• 它是有缓存的

  

〇.ES6补充

0.1. let/var

事实上var的设计可以看成JavaScript语言设计上的错误. 但是这种错误多半不能修复和移除, 以为需要向后兼容.

​ 大概十年前, Brendan Eich就决定修复这个问题, 于是他添加了一个新的关键字: let.

​ 我们可以将let看成更完美的var

块级作用域

​ JS中使用var来声明一个变量时, 变量的作用域主要是和函数的定义有关.

​ 针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题。

而在for中使用var时,我们往往需要这样,因为在ES5中 var 只有function有作用域

但是在ES6后,用let就简单多了

0.2 const的使用

​ const这个关键字

​ 在很多语言中已经存在, 比如C/C++中, 主要的作用是将某个变量修饰为常量.

​ 在JavaScript中也是如此, 使用const修饰的标识符为常量, 不可以再次赋值.

​ 什么时候使用?

​ 修饰的标识符不会被再次赋值时, 就可以使用const来保证数据的安全性.

0.2.1. 人生建议

​ 在ES6开发中,优先使用const, 只有需要改变某一个标识符的时候才使用let.

​ 使用注意点

const a = 20;
a = 30; //错误:不可以被修改

const name;//错误:没有赋值

0.3 对象字面量增强写法

​ ES6中，对对象字面量进行了很多增强。

​ 属性初始化简写和方法的简写：

二. 事件监听 v-on

v-on介绍

​ 作用：绑定事件监听器

​ 语法糖：@

​ 预期：Function | Inline Statement | Object

​ 参数：event

2.1. 事件监听基本使用

这里，我们用一个监听按钮的点击事件，来简单看看v-on的使用

​ 下面的代码中，使用了v-on:click="counter++”

​ 另外，我们可以将事件指向一个在methods中定义的函数

  
  




  
{{counter}}
  
  
  
  
  
  
  +
  -

2.2. 参数问题

• btnClick
• btnClick(event)
• btnClick(abc, event) -> $event 传入

  
  




  
  按钮1
  按钮1

  
  
  
  按钮2

  
  
  按钮3

2.3. 修饰符

• .stop 调用 event.stopPropagation() 停止冒泡

• .prevent 阻止默认行为

• .enter 键修饰符,键别名

• .once 只监听一次

• .native 监听组件根元素的原生事件

  

  
  




  
  

    aaaaaaa
    按钮
  

  
  

  

    
  

  
  

  
  按钮2

三. 条件判断

3.1. v-if/v-else-if/v-else

​ 这三个指令与JavaScript的条件语句if、else、else if类似。

​ Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

简单案例

  
  




  
优秀
  
良好
  
及格
  
不及格
  
  
{{result}}

v-if的原理：

​ v-if后面的条件为false时，对应的元素以及其子元素不会渲染。

​ 也就是根本不会有对应的标签出现在DOM中。

3.2. 登录小案例

用户再登录时，可以切换使用用户账号登录还是邮箱地址登录。

  
  



  

    用户账号
    
    
  
  

    用户邮箱
    
    
  
  切换登录方式

小问题：

​ 如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。

​ 但是按道理讲，我们应该切换到另外一个input元素中了。

​ 在另一个input元素中，我们并没有输入内容。

为什么会出现这个问题呢？

​ 问题解答：

​ 这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

​ 在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

​ 解决方案：

​ 如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key

​ 并且我们需要保证key的不同

3.3. v-show

  
  




  
  
{{message}}

  
  
{{message}}

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

v-if和v-show对比

​ 相同:

​ v-if和v-show都可以决定一个元素是否渲染

​ 不同:

​ v-if当条件为false时，压根不会有对应的元素在DOM中。

​ v-show当条件为false时，仅仅是将元素的display属性设置为none而已。

开发中如何选择呢？

​ 当需要在显示与隐藏之间切换很频繁时，使用v-show

​ 当只有一次切换时，通过使用v-if

四. 循环遍历

4.1. 遍历数组

当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。

​ v-for的语法类似于JavaScript中的for循环。

​ 格式如下：item in items的形式。

如果在遍历的过程中不需要使用索引值

​ v-for="movie in movies"

​ 依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie

如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？

​ 语法格式：v-for=(item, index) in items

​ 其中的index就代表了取出的item在原数组的索引值。

  
  




  
  

    
{{item}}
  

  
  

    

      {{index+1}}.{{item}}
    
  

4.2. 遍历对象中的属性

比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。

• value

• value, key

• value, key, index

  
  
  
    
    
  
  
  
  
    
    
  
      
  {{item}}
    
  
  
    
    
  
      
  {{value}}-{{key}}
    
  
  
    
    
  
      
  {{value}}-{{key}}-{{index}}
    
  
  
  
  
  
  
  
  

  官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。

  ​ 为什么需要这个key属性呢（了解）？

  ​ 这个其实和Vue的虚拟DOM的Diff算法有关系。

  ​ 这里我们借用React’s diff algorithm中的一张图来简单说明一下：

  

  ​ 当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点

  ​ 我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。

  ​ 即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

  ​ 所以我们需要使用key来给每个节点做一个唯一标识

  ​ Diff算法就可以正确的识别此节点

  ​ 找到正确的位置区插入新的节点。

  所以一句话，key的作用主要是为了高效的更新虚拟DOM。

  
  
  
    
    
  
  
  
  
    
  
      
  {{item}}
    
  
  
  
  
  
  
  
  

4.3. 数组哪些方法是响应式的

push():在最后面添加元素

unshift():在数组最前面添加元素

pop():删除数组中的最后一个元素

shift():删除数组中的第一个元素

splice():删除,插入,替换

sort() :排序

reverse():倒序

  
  




  

    
{{item}}
  
  按钮

五. 书籍购物车案例

index.html

  
  
  



  
  

    

      

      

        

        
书名
        
单价
        
购买数量
        
操作
      
      
      

      

        
{{item.id}}
        
{{item.name}}
        
        
{{item.price | showPrice}}
        

          
          -
          {{item.count}}
          +
        
        

          移除
        
      
      
    
    
总价格:{{totalPrice | showPrice}}
  

  
购物车为空

main.js

const vm = new Vue({
  el:'#vm',
  data:{
    books:[
      {
        id: 1,
        name:'「人間失格」',
        price: 85.42,
        count:1
      },
      {
        id: 2,
        name:'「白夜行」',
        price: 89.00,
        count:1
      },
      {
        id: 3,
        name:'「解忧杂货铺」',
        price: 65.00,
        count:1
      },
      {
        id: 4,
        name:'「天龙八部」',
        price: 185.00,
        count:1
      }
    ]
  },
  methods:{
    sub(index){
      this.books[index].count--
    },
    add(index){
      this.books[index].count++
    },
    remove(index){
      this.books.splice(index,1)
    }
  },
  computed:{
    totalPrice(){
      let totalPrice = 0;
      for (let book of this.books){
        totalPrice += book.price * book.count
      }
      return totalPrice;
    }
  },
  //过滤器
  filters:{
    // 自动把参数传进来
    showPrice(price){
      // .toFixed(2)保留两位小数
      return '￥' + price.toFixed(2)
    }
  }
});

index.css

table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}
th, td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}
th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}

点我进演示地址(外服,有点慢)