Vue —— 事件

本篇主要总结了Vue的事件相关知识


监听事件

我们以 v-on 指令为例来说明对DOM事件的监听,简单点说,就是我们通过 v-on 来达到这样一个目的:
当我对整个页面进行一些操作(比如点击)时,页面也会实时地进行一些操作(比如弹出窗口等等)

  1. 原生JS:
    • 我们设了一个点击事件,点击时页面上的数字会 加1.
      <div id="app">
          <!-- v-on绑定了点击事件,即click,而双引号内的是点击时会发生的事件 -->
          <button type="button" v-on:click="counter += 1">Add</button>
          <!-- 实时反映出counter的值 -->
          <p>This is counter: {{ counter }}</p>
      </div>
      <script type="text/javascript">
      var app = new Vue({
          el: '#app',
          data: {
              counter: 0  //初始值设为0
          },
      })
      </script>
  2. 绑定方法:
    • 此时事件绑定着一个方法,v-on接受到的是一个要被调用的方法名
      <div id="app">
          <!--这里的add是方法名-->
          <button type="button" v-on:click="add">Add</button>
          <p>This is counter: {{ counter }}</p>
      </div>
      <script type="text/javascript">
      var app = new Vue({
          el: '#app',
          data: {
                  counter: 0
          },
          methods: {
              add: function(){
                  //this方法指向当前的Vue实例,即app,其实app.counter就是这里的counter
                  this.counter += 1;
              }
              /*可以简写为:
              add(){
                  this.counter += 1;
              }
              */
          }
      })
      </script>
  3. 方法传参:
    • 除了直接绑定一个方法,也可以调用方法:
      <div id="app">
          <button type="button" v-on:click="say('Hi')">Hi</button>
          <button type="button" v-on:click="say('Hello')">Hello</button>
      </div>
      <script type="text/javascript">
      var app = new Vue({
          el: '#app',
          methods: {
              say(msg){
                  alert(msg);
              }
          }
      })
      </script>
  4. 访问原生DOM事件:
    • 我们使用一个特殊的变量$event来访问其对应的原始的事件是什么
      <div id="app">
      <button type="button" v-on:click="one('one',$event)">one</button><br><br>
      <p style="background-color: red;" v-on:mouseover="two('two',$event)">
          two
      </p>
      </div>
      <script type="text/javascript">
      var app = new Vue({
          el: '#app',
          methods: {
              one(message,event){
                  alert(message + event);
              },
              two(message,event){
                  alert(message + event);
              }
          }
      })
      </script>

事件修饰符

v-on的事件修饰符已在另一篇博文中详细介绍:


按键修饰符

v-on的按键修饰符以及系统修饰符已在另一篇博文中详细介绍:

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!