[vue]6-vue的事件绑定/条件渲染/循环/表单绑定

事件监听

在前端开发中，我们需要经常和用于交互。

• 这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等

• 在Vue中如何监听事件呢？使用v-on指令

v-on介绍

• 作用：绑定事件监听器
• 缩写：@
• 预期：Function | Inline Statement | Object
• 参数：event

v-on基础

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

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

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

    

        
{{number}}
        按钮1
        按钮2
    
    

点击哪一个都可以让number增加

注：v-on也有对应的语法糖

​ v-on:click可以写成@click

        按钮1
        按钮2

效果也是一样的

v-on参数

• 当通过methods中定义方法，以供@click调用时，需要注意参数问题：

• 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。

  • 但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去

• 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

没有传参数

    

        
{{number}}
        按钮
    
    

如果传了参数，又想要event

    

        
{{number}}
        按钮
    
    

v-on修饰符

在某些情况下，我们拿到event的目的可能是进行一些事件处理。

但是不想写一个函数，想更简单点，这个vue也帮我们实现了

Vue提供了修饰符来帮助我们方便的处理一些事件：

• .stop - 调用 event.stopPropagation()。阻止冒泡
• .prevent - 调用 event.preventDefault()。阻止默认事件
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。

    

        
        按钮
        
        按钮
        
        按钮
        
        按钮
        
        
        
        
        
        按钮
    

v-on绑定多个事件

一个事件绑定多个函数

条件渲染

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

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

    

        
优秀
        
良好
        
及格
    
    

注意：

• 指令后面跟的是表达式，不需要花括号。
• v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-if的原理：

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

条件渲染案例

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

    

        
            用户账号：
            
        
        
            邮箱地址：
            
        
        切换类型
    
    

案例小问题

• 如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
• 但是按道理讲，我们应该切换到另外一个input元素中了。
• 在另一个input元素中，我们并没有输入内容。

为什么呢？

• 这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
• 在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

解决方案：

• 如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key
• 并且我们需要保证key的不同
  

v-show

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

    

        
我要不要显示呢？
    
    

会显示出来

如果是false就什么都不显示

v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？

区别

• v-if当条件为false时，压根不会有对应的元素在DOM中（创建和销毁节点）。
• v-show当条件为false时，仅仅是将元素的display属性设置为none而已。

开发中如何选择呢？

• 当需要在显示与隐藏之间切片很频繁时，使用v-show
• 当只有一次切换时，通过使用v-if

其实 v-if 是重新重建一个标签，而v-show仅仅是把代码的css修改了 display:none

对性能而言，如果使用v-if 在每一次切换的时候都会重新创建一个标签或组件，然后卸载一个标签或组件，这样做对性能的要求比较高

而v-show仅仅是display:none，打开，对性能的要求相对较小，但是第一次加载组件的时候v-show是会被创建的，所以就有了上面那个结论，在开发中如何选择。

v-for循环遍历

v-for可以遍历数组，字符串，对象，number

v-for遍历数组

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

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

格式如下：item in items的形式。(item of items 也可以)

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

• v-for=“movie in movies”
• 依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie

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

• 语法格式：v-for=(item, index) in items
• 其中的index就代表了取出的item在原数组的索引值。

    

        

            
            
序号：{{index}}---->内容：{{item}}
        
    
    

v-for遍历对象

    

        

            
            
序号：{{index}}---->键名：{{key}};   键值----->{{item}}
        
    
    

v-for遍历字符串

    

        

            
            
序号：{{index}}---->内容：{{item}}
        
    
    

v-for循环数字

    

        

            
            
序号：{{index}}---->内容：{{item}}
        
    

组件的key属性

官方推荐我们在使用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。

如果我要往ABCDE里面插入一个F

是左边这个顺序，就是本来一个标签对应一个字母，

但是我新来一个，这个时候，就需要重新编排，比如以前的li1对应A,li2对应B

我要在B和C之间插入C，这个时候，li3对应的C就变了，编程li3对应F，li4对应C，依次往后排了

这样的效率比较低，那么加了key会怎么样呢

他就会按照右边，每一个key都对应一个li，也对应一个字母，比如给li1加一个key它的值是A，那么它类似绑定了，就算你再来一个,也不会重新创建li，并且给li加一个值，不会这样的，他会怎么样呢，如果你在c和d之间加入z，每一个li都有key，都有绑定的值，他们都不变，只是在cd之间创建一个li，再绑定上key，绑定上值。这样的效率更高。

上面的li，li1都是举例，也就是

• 有很多，li1表示第一个li标签

  所以，key必须是唯一的，否则没有意义

  当然如果在最后一个加，加不加key都一样

  

  检测数组更新

  因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。

  Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

  push()

  pop()

  shift()

  unshift()

  splice()

  sort()

  reverse()

  这些方法和原生js类似。

  this.letters.push('aaa')
  

  类似这种，可以和普通的js一样使用

  案例：

  

  实现上图效果

      
  
          
  
              
  
                  
  
                      
  
                      
  书籍名称
                      
  出版日期
                      
  价格
                      
  购买数量
                      
  操作
                  
              
              
  
                  
  
                      
  {{index}}
                      
  {{item.name}}
                      
  {{item.time}}
                      
  {{item.price}}
                      
  
                          -
                          {{item.num}}
                          +
                      
                      
  
                          移除
                      
                  
              
          
          
  总价:{{allPrice}}
      
      
  

  v-model

  表单绑定v-model

  表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。

  Vue中使用v-model指令来实现表单元素和数据的双向绑定。

  • 绑定input

      
  
          
          
  输入的内容是：{{message}}
      
      
  

  

  案例的解析：

  • 当我们在输入框输入内容时

  • 因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。

  • 当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。

  • 所以，通过v-model实现了双向的绑定。

  • 绑定textarea

      
  
          
          
  输入的内容是：{{message}}
      
      
  

  

  • 绑定 radio

      
  
          
              
              男
          
          
              女
          
          
  您的选择：{{gender}}
      
      
  

  v-model：checkbox

  复选框分为两种情况：单个勾选框和多个勾选框

  单个勾选框：

  • v-model即为布尔值。
  • 此时input的value并不影响v-model的值。

      
  
          
              同意协议
          
      
      
  

  多个复选框：

  • 当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。

  • 当选中某一个时，就会将input的value添加到数组中。

      
  
          篮球
          足球
          台球
          
  您选中的爱好：{{hobbies}}
      
      
  

  

  v-model：select

  和checkbox一样，select也分单选和多选两种情况。

  单选：只能选中一个值。

  v-model绑定的是一个值。

  当我们选中option中的一个时，会将它对应的value赋值到mySelect中

      
  
          
              请选择
              A
              B
              C
          
          
  当前选择的是:{{select}}
      
      
  

  多选：可以选中多个值。

  v-model绑定的是一个数组。

  当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

      
  
          
          
              请选择
              A
              B
              C
          
          
  当前选择的是:{{select}}
      
      
  

  

  值绑定

  值绑定就是动态的给value赋值而已

  • 我们前面的value中的值，可以回头去看一下，都是在定义input的时候直接给定的。

  • 但是真实开发中，这些input的值可能是从网络获取或定义在data中的。

  • 所以我们可以通过v-bind:value动态的给value绑定值。

  • 这不就是v-bind在input中的应用吗？

      
  
          
          
          
              
              {{item}}
          
          
  当前选择了：{{myLikes}}
      
      
  

  v-model的修饰符

  lazy修饰符：

  • 默认情况下，v-model默认是在input事件中同步输入框的数据的。

  • 也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。

  • lazy修饰符可以让数据在失去焦点或者回车时才会更新：

      
  
          
          
  输入的内容是：{{message}}
      
      
  

  

  number修饰符：

  • 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
  • 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
  • number修饰符可以让在输入框中输入的内容自动转成数字类型

  对比一下

  没有加修饰符

      
  
          
          
  输入的内容是：{{typeof message}}
      
      
  

  

  使用修饰符

      
  
          
          
  输入的内容是：{{typeof message}}
      
      
  

  

  trim修饰符：

  • 如果输入的内容首尾有很多空格，通常我们希望将其去除
  • trim修饰符可以过滤内容左右两边的空格

  对比一下

      
  
          
          
  输入的内容是:{{message}}哟哟哟
      
      
  

  

  加上修饰符

      
  
          
          
  输入的内容是:{{message}}哟哟哟