Vue-04-事件监听、条件判断、循环遍历、响应式的数组方法、过滤器

一、事件监听

@ 是 v-on: 的语法糖（简写）

        <button v-on:click="add">+</button>
        <button @click="subtract">-</button>

（一）v-on的参数问题：

1. 在事件监听时，且调用方法不需要传参数时，方法后的()可以省略

2. 在事件定义时，写方法时省略了()，但是方法本身需要一个参数，此时Vue会默认将浏览器产生的event事件对象作为参数传入到方法

  <div id="app"><button @click="btn1Click">按钮1</button></div>

      methods: {
        btn1Click(event) {
          console.log('----------', event);
        }
      }

3. 方法定义时，我们需要event对象，同时又需要其他参数，此时可以通过 $event 手动获取到浏览器产生的event对象

    <button @click="btn2Click(123,$event)">按钮2</button>

        btn2Click(abc, event) {
          console.log('+++++++++++', abc, event)
        }

（二）v-on修饰符（帮助处理一些事件）

（1）.stop 

阻止冒泡，相当于调用 event.stopPropagation()

  <div id="app">
    <!-- .stop修饰符的使用：阻止冒泡 -->
    <div @click="divClick">
      <button @click.stop="btnClick">按钮</button>
    </div>
  </div>

（2）.prevent

阻止默认事件，相当于调用 event.preventDefault()

    <!-- .prevent修饰符：阻止默认事件 -->
    <form action="baidu">
      <input type="submit" @click.prevent="submitClick">
    </form>

（3）.{keyCode | keyAlias}

监听键盘某个按键的点击，只有当事件是由特定键触发时才产生回调

    <!-- 监听键盘某个按键的点击 -->
    <!-- 如只有按enter键才触发 -->
    <input type="text" @keyup.enter="keyUp">

（4）.native

监听组件根元素的原生事件

    <!-- .native 监听组件根元素的原生事件 -->
    <!-- 如自定义组件cpn -->
    <cpn @click.native="cpnClick"></cpn>

（5）.once

只触发一次回调

    <!-- .once 修饰符：只触发一次回调 -->
    <button @click.once="onceClick">一次性按键</button>

二、条件判断

（一）v-if、v-else、v-else-if

1. v-if

    <h2 v-if=isShow>{{message}}</h2>

2. v-else

    <h2 v-if=isShow>{{message}}</h2>
    <h1 v-else>isShow为false时，显示我</h1>

3. v-else-if

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

（二）v-if 和 v-show 的区别

v-if：当条件为false时，包含v-if指令的元素根本就不会存在于DOM中

v-show：当条件为false时，v-show只是为元素添加一个行内样式display:none

开发中如何选择：当需要在显示与隐藏之间频繁切换时，使用v-show，当只有一次切换时，使用v-if（实际开发场景v-if使用更多）

三、循环遍历

遍历数组

    <!-- 1.在遍历过程中没有使用索引值 -->
    <ul>
      <li v-for="item in names">{{item}}</li>
    </ul>
    <!-- 2.在遍历过程中获取索引值 -->
    <ul>
      <li v-for="(item,index) in names">{{index+1}}-{{item}}</li>
    </ul>

遍历对象

    <!-- 1.在遍历对象过程中，如果只获取一个值，则获取到的是value -->
    <ul>
      <li v-for="item in info">{{item}}</li>
    </ul>

    <!-- 2.获取key和value，则用(value, key) -->
    <ul>
      <li v-for="(value,key) in info">{{key}}-{{value}}</li>
    </ul>

    <!-- 3.获取key、value和index，则用(value, key, index)  -->
    <ul>
      <li v-for="(value,key,index) in info">{{index}}-{{key}}-{{value}}</li>
    </ul>

四、响应式的数组方法

push()、pop()、shift()、unshift()、splice()、sort()、reverse() 都是响应式的

但通过索引值直接修改数组中的元素，不是响应式的

          // 通过索引值修改数组中的元素，不是响应式的
          // this.letters[0] = 'bbbb';
          // 如何实现该需求？
          // 方法一：
          // this.letters.splice(0, 1, 'bbbb')
          // 方法二：
          // set(要修改的对象,索引值,修改后的值)
          Vue.set(this.letters, 0, 'bbbbb')

五、过滤器

          <td>{{item.price | showPrice}}</td>

  // 过滤器
  filters: {
    showPrice(price) {
      return '￥' + price.toFixed(2)
    }
  }