v-on方法参数

情况一：事件处理方法没有参数。v-on为事件绑定方法时小括号可以省略，也可以不省略。

情况二：事件处理方法需要参考，且v-on绑定方法时传递了相应的参数。这种情况是最常见的。

情况三：事件处理方法本身需要参数，但v-on绑定方法时省略了小括号，这时Vue会默认将浏览器生成的event事件对象作为第一个参数传入方法。

情况四：事件处理方法需要event对象，同时又需要其他参数，可以手动获取浏览器参数的event对象$event传入方法。

<div id="app">
  <!--事件调用的方法没有参数-->
  <button @click="btn1Click()">按钮1</button>
  <button @click="btn1Click">按钮1</button>
  <!--方法需要参考，且v-on绑定方法时传递了参数-->
  <button @click="btn2Click(123)">按钮2</button>
  <!--方法本身需要参数，但v-on绑定方法时省略了小括号，这时Vue会默认将浏览器生成的event事件对象作为第一个参数传入到方法-->
  <button @click="btn3Click">按钮3</button>
  <!--方法需要event对象，同时又需要其他参数，手动获取浏览器参数的event对象：$event-->
  <button @click="btn4Click(123, $event)">按钮4</button>
</div>

<script>
  const app = new Vue({
    el: '#app',
    methods: {
      btn1Click(){
        console.log('btn1Click')
      },
      btn2Click(abc){
        console.log('btn2Click', abc)
      },
      btn3Click(event){
        console.log('btn3Click', event)
      },
      btn4Click(abc, event){
        console.log('btn4Click', abc, event)
      }
    }
  })
</script>

v-on修饰符

.stop：阻止事件冒泡。在下面这个例子中，点击<button>，只会触发btnClick，而不会触发divClick，因为<button>的click点击事件被.stop修饰符阻止向父元素传递了。

<div @click="divClick">
  abc
  <button @click.stop="btnClick">按钮</button>
</div>

.prevent：阻止默认事件。在下面这个例子中，点击<input type="submit">，不会跳转到<form>绑定的action中，因为<input>的click点击的默认事件被.prevent修饰符阻止了。

<form action="https://www.baidu.com/">
  <input type="submit" value="提交" @click.prevent="submitClick">
</form>

.{keyCode|keyAlias}：在键盘事件中只监听某个特定的键，可以是键码，也可以是键的别名。在下面这个例子中，<input>只监听回车键的释放按键。

<input type="text" @keyup.13="keyUp">
<input type="text" @keyup.enter="keyUp">

.once：事件只触发一次。

.native：监听组件元素的原生事件。在下面这个例子中，比如<back-top>是一个组件元素（这个在后面讲到组件化开发的时候会说），click是一个原生事件而非自定义事件，因此需要加上.native修饰符才能监听到。

<back-top @click.native="backClick"/>

案例-点击切换选中目标

这个案例结合了前面说的v-for、v-bind、v-on：

v-for动态渲染数组movies，遍历数组元素值和下标
v-bind为v-for的每个数组项动态绑定class，具有active类的条件是当前项被选中，即当前项的index等于currentIndex
v-on为v-for的每个数组项绑定click事件处理方法choose，并传入index，将其设置为当前选中项currentIndex

<div id="app">
  <ul>
    <li v-for="(m, index) in movies" v-on:click="choose(index)" v-bind:class="{active: index===currentIndex}">{{m}}</li>
  </ul>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      movies: ['星际穿越', '大话西游', '少年派的奇幻漂流', '盗梦空间'],
      currentIndex: 0
    },
    methods: {
      choose: function (index) {
        //记录当前状态
        this.currentIndex = index
      }
    }
  })
</script>

<style>
  .active{
    color: red;
  }
</style>