【猿说VUE】事件处理，Vue奠基之石

VUE基础：事件处理在前端小伙伴开发生涯中，经常要面对各种画面表单、各种按钮，针对表单和按钮的处理都包含一个共通事件：点击 (click)，前端最常见的场景：表单提交按钮点击列表折叠9.1 事件监听在vue中可以用 v-on 指令监听原生的DOM事件，并在触发时运行一些 JavaScript代码，在vue中换了一种写法，更方便我们来控制数据。MVVM中强调的重点即数据驱动，那么在v...

黑白猿

18841人浏览 · 2020-04-01 13:33:12

黑白猿 · 2020-04-01 13:33:12 发布

VUE基础：事件处理

在前端小伙伴开发生涯中，经常要面对各种画面表单、各种按钮，针对表单和按钮的处理都包含一个共通事件：点击 (click)，前端最常见的场景：

表单提交
按钮点击
列表折叠

9.1 事件监听

在vue中可以用 v-on 指令监听原生的DOM事件，并在触发时运行一些 JavaScript代码，在vue中换了一种写法，更方便我们来控制数据。MVVM中强调的重点即数据驱动，那么在vue中我们就是利用事件处理来驱动视图已达到双向绑定的目的。即使用事件去控制数据变化，再由数据的变化驱动着视图的更新。

事件处理就是DOM事件，只不过在vue中使用方式不同。
事件处理是控制数据变化的控制器，是连接视图与数据的桥梁。

所有的vue事件处理方法和表达式都绑定在当前视图的ViewModel，维护更加方便。使用v-on好处如下：

通过HTML模板便能轻松定位在JS代码里对应的方法
无须在JS里手动绑定事件，ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试
当ViewModel被销毁时，其关联的所有的事件处理器都会自动被删除。

9.2 事件修饰符

在vue中，事件修饰符处理了许多DOM事件的细节，避免了我们手动去处理原生事件的逻辑，从而使我们专注于程序的内部逻辑处理。vue中事件修饰符主要有：

.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
.capture：与事件冒泡的方向相反，事件捕获由外到内
.self：只会触发自己范围内的事件，不包含子元素
.once：只会触发一次

9.3 按键修饰符

在项目开发的功能页面中，经常会遇到如下需求：用户输入账号密码后点击Enter键、筛选条件选择后自动加载符合选中条件的数据等。在传统的前端开发中，需要知道JavaScript中需要监听的按键所对应的keyCode，然后通过判断keyCode得知用户是按下了哪个键，以便执行后续操作。而vue给我们提供了一种便利的监听方式去监听需要的按键事件。在监听键盘事件时，vue为最常用的按键提供了别名，这样就减少了查找常见的按键所对应的keyCode的时间。

.enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键

9.4 实例代码

eventvue.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue事件处理</title>
  </head>

  <body>
    <div id='app'>
      <h2>Vue之绑定监听</h2>
      <button v-on:click="alertMsg">提示消息：默认事件形参（event），隐含属性对象（隐含属性对象: $event）</button>
      <br>
      <button v-on:click="alertMsgParam('大家好，我是黑白猿')">提示参数消息：大家好，我是黑白猿</button>
      <br>
      <button v-on:click="alertMsgParamAndEvent('大家好，我是黑白猿', $event)">提示参数消息：</button>
      <hr>
      <h2>Vue之事件修饰符</h2>
      <a href="http://www.baidu.com" v-on:click.prevent="alertMsgLink">百度一下</a>
      <hr>
      <div style="width: 200px;height: 100px;background: red" v-on:click="alertMsgOut">
        <div style="width: 100px;height: 50px;background: blue" v-on:click.stop="alertMsgIn"></div>
      </div>
    
      <h2>Vue之按键修饰符</h2>
      <input type="text" v-on:keyup.13="alertMsgEnter">
      <input type="text" v-on:keyup.enter="alertMsgEnter">
    </div>
  </body>

  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script type="text/javascript">
    const vm = new Vue({
      el : "#app",
      data : {

      },
      methods :{
        alertMsg(event){
          alert(event.target.innerHTML);
        },
        alertMsgParam(message){
          alert(message);
        },
        alertMsgParamAndEvent(message, event){
          alert(event.target.textContent + message);
        },
        alertMsgLink(){
          alert("点击网页链接")
        },
        alertMsgOut(){
          alert("点击外部框框");
        },
        alertMsgIn(){
          alert("点击内部框框")
        },
        alertMsgEnter(){
          alert("您按了回车键")
        }

      }

    })
  </script>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^