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及其事件修饰符

按键修饰符

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

• Vue - 按键修饰符 && 系统修饰符

本作品采用《CC 协议》，转载必须注明作者和本文链接