Vue 3 基础[3] : 事件修饰符 (event modifier)

表单

如下的表单，点击 Sign Up，浏览器默认提交表单并向服务器发送HTTP请求，页面将重新加载，Vue app 将重启。

      <form v-on:submit='submitForm'>
        <input type='text'></input>
        <button>Sign Up</button>
      </form>

为了阻止这种默认行为，有两种方法：

1. 使用 Vanilla JS 的 preventDefault 方法：

    submitForm(e) {
      e.preventDefault();
      console.log("event submitted!")
    },

2. 使用 Vue 内建的事件修饰符，这个例子使用 .prevent 。即将 <form v-on:submit='submitForm'> 改为 <form v-on:submit.prevent='submitForm'> ，也就是在监听的事件后加.prevent ，从而可以省略 submitForm 里对应的逻辑，从而简化代码。

使用 .stop 阻止传播 propagation。

 <button v-on:click.right="reduce(10)">Remove</button>

鼠标

.right : 仅仅响应鼠标右击事件，对应 click 有3种修饰符：left, middle, right. 默认 left.

键盘

 <input type="text" v-on:input="setName" v-on:keyup.enter="oneMethod" />

keyup ： 某个键被按下并被释放，修饰符可以是：enter 回车键被按下。
或者 ctrl， shift，page-down 等等。这里监听 enter 键事件。