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

表单

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

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

为了阻止这种默认行为,有两种方法:

  1. 使用 Vanilla JS 的 preventDefault 方法:
    submitForm(e) {
      e.preventDefault();
      console.log("event submitted!")
    },
  1. 使用 Vue 内建的事件修饰符,这个例子使用 .prevent 。即将
    改为 ,也就是在监听的事件后加.prevent ,从而可以省略 submitForm 里对应的逻辑,从而简化代码。

使用 .stop 阻止传播 propagation。

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

鼠标

.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 键事件。

你可能感兴趣的