Vue(2)-v-on参数问题, v-on修饰符

v-on参数问题

• 如果@click不需要额外的参数，该方法后的()可以不添加
• 如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去
• 如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

<div id="app">
    <!--undefine-->
    <button @click="btn1Click()">btn1</button>
    <!--默认传入mouseEvent对象-->
    <button @click="btn2Click">btn2</button>
    <!--需要自己传入参数，有需要event对象-->
    <button @click="btn3Click(123,$event)">btn3</button>
</div>
<script>
    const vm = new Vue({
      el: '#app',
      methods: {
        btn1Click: function (a) { console.log(a);},
        btn2Click: function (a) { console.log(a);},
        btn3Click: function (a,event) { console.log(a,event);},
      }
    })
</script>

v-on修饰符

事件冒泡？ => 点击btn时div也被点击

<div id="app">
  <div @click="divClick">
    aaa
    <button @click="btnClick">btn1</button>
  </div>
</div>
<script>
  const vm = new Vue({
    el: '#app',
    methods: {
      btnClick: function () { console.log('btnClick');},
      divClick: function () { console.log('divClick');},
    }
  })
</script>

这样写即可

    <button @click.stop="btnClick">btn1</button>

阻止表单自动提交，自己手动提交，重写函数

<form action="kkk">
  <input type="submit"  @click.prevent="submitClick"  value="submit"/>
</form>

键盘修饰符

<input @keyup.enter="onEnter">
<input @keyup.13="onEnter">
<button @click.once >只触发一次</button>

@click.native 监听组件根原生原生事件