Vue的v-on事件监听，v-if条件判断与v-for循环遍历

1.在Vue中监听事件使用v-on指令

v-on
作用：绑定事件监听器
缩写(语法糖）：@ （如v-on:click可简写为@click）

当通过methods中定义方法，以供@click调用时，需要注意参数问题：
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。
但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去，如果函数需要参数,但是没有传入, 那么函数的形参为undefined

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


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

.stop - 调用 event.stopPropagation()。（阻止事件冒泡）

 <!--1. .stop修饰符的使用:停止冒泡-->
 
<button @click.stop="doThis"></button>

.prevent - 调用 event.preventDefault()。（阻止事件提交）

 <!--阻止默认行为-->
 
 <button @click.pervent="doThis"></button>
 
 
  <!--阻止默认行为，没有表达式-->
  
<form @submit.pervent></form>


  <!--串联修饰符-->
  
  <button @click.stop.pervent="doThis"></button>
  

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。（监听某个键盘键帽）

  <!--键修饰符，键别名-->
  
  <input @keyup.enter="onEnter">


  <!--键修饰符，键代码-->
  
    <input @keyup.13="onEnter">
  

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

.once - 只触发一次回调。

<button @click.once="doThis"></button>

2.条件判断

1）.v-if、v-else-if、v-else

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

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

  <h1>{{result}}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      score: 95
    },
    computed: {
      result() {
        let showMessage = '';
        if (this.score >= 90) {
          showMessage = '优秀'
        } else if (this.score >= 80) {
          showMessage = '良好'
        }
        // ...
        return showMessage
      }
    }
  })
</script>

v-if的原理：

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

2）.条件渲染

案例：
用户登录时，可以切换使用用户账号登录还是邮箱地址登录

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

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

效果图：

发现问题：
我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
切换类型应该切换到另外一个input元素中了，在另一个input元素中，并没有输入内容。

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

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

3）.v-show

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

• v-if当条件为false时，压根不会有对应的元素在DOM中，当只有一次切换时，通过使用v-if
• v-show当条件为false时，仅仅是将元素的display属性设置为none而已，当需要在显示与隐藏之间切片很频繁时，使用v-show

3.v-for 循环遍历

v-for的语法类似于JavaScript中的for循环。
格式如下：item in items的形式

1）.遍历数组

• 如果在遍历的过程中不需要使用索引值
  语法格式： v-for=“movie in movies”
  依次从movies中取出movie，并且在元素的内容中，可以使用Mustache语法，来使用movie

• 如果在遍历的过程中，需要元素在数组中的索引值
  语法格式：v-for=(item, index) in items
  其中的index就代表了取出的item在原数组的索引值。

<div id="app">
  <!--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>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      names: ['陈凯歌', '张艺谋', '姜文', '冯小刚']
    }
  })
</script>

2）.遍历对象

<div id="app">
  <!--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">{{value}}-{{key}}</li>
  </ul>


  <!--3.获取key和value和index 格式: (value, key, index) -->
  <ul>
    <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      info: {
        name: '妍华',
        age: 21,
        height: 1.66
      }
    }
  })
</script>

3）.组件的key属性

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

它其实和Vue的虚拟DOM的Diff算法有关系
（Vue中的Diff算法详见文章：https://blog.csdn.net/weixin_41652865/article/details/105226660）
当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点：
在c和d之间加一个z，Diff算法默认执行起来是把c更新成b，d更新成c，e更新成d，最后再插入z，这样很没有效率

所以需要使用key来给每个节点做一个唯一标识
Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点。
所以一句话，key的作用主要是为了高效的更新虚拟DOM

4).检测数组更新（响应式的数组方法）

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

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

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

<div id="app">
  <ul>
    <li v-for="item in letters">{{item}}</li>
  </ul>
  <button @click="btn1Click">push</button>
  <button @click="btn2Click">pop</button>
  <button @click="btn3Click">shift</button>
  <button @click="btn4Click">unshift</button>
  <button @click="btn5Click">splice</button>
  <button @click="btn5Click">sort</button>
  <button @click="btn5Click">reverse</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      letters: ['a', 'b', 'c', 'd']
    },
    methods: {
      btn1Click() {
        // 1.push方法
        this.letters.push('aaa')
        // this.letters.push('aaaa', 'bbbb', 'cccc')
      },
      btn2Click() {
        // 2.pop(): 删除数组中的最后一个元素
        this.letters.pop();
      },
      btn3Click() {
        // 3.shift(): 删除数组中的第一个元素
        this.letters.shift();
      },
      btn4Click() {
        // 4.unshift(): 在数组最前面添加元素
        // this.letters.unshift()
        this.letters.unshift('aaa', 'bbb', 'ccc')
      },
      btn5Click() {
        // 5.splice作用: 删除元素/插入元素/替换元素
        // 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)
        // 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素
        // 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素
        // splice(start)
        // splice(start):
        this.letters.splice(1, 3, 'm', 'n', 'l', 'x')
        // this.letters.splice(1, 0, 'x', 'y', 'z')
      },
      btn6Click() {
        // 6.sort()
        this.letters.sort()
      },
      btn7Click() {
        // 7.reverse()
        // this.letters.reverse()
        // 注意: 通过索引值修改数组中的元素
        this.letters[0] = 'bbbbbb';
        // this.letters.splice(0, 1, 'bbbbbb')
        // set(要修改的对象, 索引值, 修改后的值)
        // Vue.set(this.letters, 0, 'bbbbbb')
      }
    }
  })
</script>