事件监听

v-on

语义给元素节点添加事件监听。
语法糖直接在属性前面加事件前面加上@。
关键点参数

  • 如果事件没有参数，( ) 可写可不写。
  • 如果方法定义了一个参数a，但是调用事件时没有传入实参，Vue会将event对象传给参数a。
  • $event可以使event对象没必要作为第一个参数传递。

例子实现样式切换

  1. //使用index值作为class的判断条件
  2. //通过自定义属性保存index的值，然后在事件处理函数里，调用getAttribute方法得到data-index属性的值.
  3. //编译模板时会优先使用v-for指令中的参数，然后再找data中的参数。
  5. <div id="vue">
  6.   <ul @click="changeColor">
  7.     <li v-for="(item, index) in movies" :data-index="index" :class="{red: index == num}">{{item}}</li>
  8.   </ul>
  9. </div>
  10. <script>
  12.   const app = new Vue({
  13.     el: "#vue",
  14.     data: {
  15.       movies: [1,2,3,4,5,6],
  16.       num : 0,
  17.     },           
  18.     methods:{
  19.       changeColor(e){
  20.         var index = e.target.getAttribute('data-index');
  21.         this.num = index;           
  22.       },
  23.     }
  24.   })
  25. </script>
<div id="vue">
  <ul @click="changeColor(index)">
    <li v-for="(item, index) in movies" :class="{red: index == num}">{{item}}</li>
  </ul>
</div>
<script>

  const app = new Vue({
    el: "#vue",
    data: {
      movies: [1,2,3,4,5,6],
      num : 0,
    },           
    methods:{
      changeColor(index){   
        this.num = index;           
      },
    }
  })
</script>

修饰符

Vue中的方法最好只是处理数据逻辑，不要操作DOM中的细节。如果要操作DOM可以使用修饰符。

通用事件修饰符

  • .stop：阻止事件冒泡。
  • .prevent：阻止事件默认事件。
  • .capture：使用事件捕获。
  • .once：事件只触发一次。
  • .self：只触发绑定事件处理函数的元素，而不是从内部元素触发。

关键点修饰符可以串联，同样修饰符的顺序也很重要。

鼠标事件修饰符

  • @click.left
  • @click.right

  • @click.middle

    键盘事件修饰符

  • @keyup.enter：只有enter键会触发事件。