Vuejs——（5）v-on

悠悠 2022-07-18 00:13 140阅读 0赞

**资料来于官方文档：**

**http://cn.vuejs.org/guide/events.html**

**本文是在官方文档的基础上，更加细致的说明，代码更多更全。**

**简单来说，更适合新手阅读**

## **（二十二）方法处理器** ##

### ①v-on的标准用法 ###

用于监听DOM事件，典型的就是v-on:click，处理的方法放在methods属性里

会默认传一个参数，代码如下：

<button @click="test">点击</button>
    
    methods: {
        test: function (evt) {
            console.log(evt);
        }
    }

这里的evt，是标准的鼠标点击事件，类似jquery的click事件的回调函数中的参数。

可以通过this来找到data属性里的值（或许也能找到其他几个），例如：

data: {
        items: "test"
    },
    methods: {
        test: function (evt) {
            console.log(this.items);
            console.log(evt);
        }
    }

这里的this.items，就是data的items这个变量；

### ②内联语句处理器 ###

给v-on事件传一个固定参数

<button @click="test('a')">点击搜索age</button>

当这个时候，函数的第一个参数就不是鼠标点击事件了，而是字符串a

test: function (mes) {
        console.log(mes);
    }

mes的值是’a’

$event

如果需要给他一个像上面一样的鼠标点击事件时，则使用$event作为参数（他和不传参数时的默认鼠标事件对象是相同的）；

使用Vue实例的变量

如果需要传一个data属性里的值，则直接放属性名

例如：

<div id="app">
        <a href="http://www.baidu.com" @click="test(items, $event)">点击搜索age</a>
    </div>
    <script>
        var test = {name: "test"};
        var vm = new Vue({
            el: '#app',
            data: {
                items: "test"
            },
            methods: {
                test: function (msg, evt) {
                    console.log(msg);
                    evt.preventDefault();//阻止默认动作，比如这里是页面跳转
                }
            }
        })
    </script>

输出：test和BUTTON

### ③事件修饰符（针对v-on） ###

<table> 
 <tbody> 
  <tr> 
   <td> <p>修饰符</p> </td> 
   <td> <p>效果</p> </td> 
   <td> <p>备注</p> </td> 
  </tr> 
  <tr> 
   <td> <p>.prevent</p> </td> 
   <td> <p>阻止html元素的默认事件</p> </td> 
   <td> <p>类似evt.preventDefault()</p> </td> 
  </tr> 
  <tr> 
   <td> <p>.stop</p> </td> 
   <td> <p>阻止事件冒泡</p> </td> 
   <td> <p>&nbsp;</p> </td> 
  </tr> 
  <tr> 
   <td> <p>keyup.数字</p> </td> 
   <td> <p>当该数字表示的按键弹起时</p> </td> 
   <td> <p>有别名</p> </td> 
  </tr> 
  <tr> 
   <td> <p>keyup.enter</p> </td> 
   <td> <p>回车</p> </td> 
   <td> <p>按下回车时</p> </td> 
  </tr> 
  <tr> 
   <td> <p>keyup.tab</p> </td> 
   <td> <p>Tab按钮</p> </td> 
   <td> <p>tab切入该input时</p> </td> 
  </tr> 
  <tr> 
   <td> <p>keyup.delete</p> </td> 
   <td> <p>del键</p> </td> 
   <td> <p>会导致原始的delete删除功能失效</p> </td> 
  </tr> 
  <tr> 
   <td> <p>keyup.esc</p> </td> 
   <td> <p>esc键</p> </td> 
   <td> <p>按下esc时</p> </td> 
  </tr> 
  <tr> 
   <td> <p>keyup.space</p> </td> 
   <td> <p>空格键</p> </td> 
   <td> <p>不会使空格功能失效（即按下空格时，既空格，又触发事件）</p> </td> 
  </tr> 
  <tr> 
   <td> <p>keyup.up</p> </td> 
   <td> <p>键盘方向键的上</p> </td> 
   <td> <p>上键同时会使光标到输入框的最左边</p> <p>（焦点在输入框时才生效，按键弹起时生效，下同）</p> </td> 
  </tr> 
  <tr> 
   <td> <p>keyup.down</p> </td> 
   <td> <p>键盘方向键的下</p> </td> 
   <td> <p>到输入框的最后面</p> </td> 
  </tr> 
  <tr> 
   <td> <p>keyup.left</p> </td> 
   <td> <p>方向左键</p> </td> 
   <td> <p>光标左移</p> </td> 
  </tr> 
  <tr> 
   <td> <p>keyup.right</p> </td> 
   <td> <p>方向右键</p> </td> 
   <td> <p>光标右移</p> </td> 
  </tr> 
  <tr> 
   <td> <p>.self</p> </td> 
   <td> <p>当前元素本身（非子元素）时触发事件</p> </td> 
   <td> <p>类似冒泡的时候找最顶层，一般用于click之类的鼠标事件(1.0.16之后)</p> </td> 
  </tr> 
  <tr> 
   <td> <p>.capture</p> </td> 
   <td> <p>按照capture模式来处理</p> </td> 
   <td> <p>简单来说，根据我推测，是根据捕获顺序触发冒泡（原本模式是后捕获先冒泡，这个正好相反）（1.0.16之后）</p> </td> 
  </tr> 
 </tbody> 
</table>

对于.self来说，例如以下代码：

<div id="app">
        <div @click.self="test" class="a">
            <div class="b">
            </div>
        </div>
    </div>
    <script>
        var test = {name: "test"};
        var vm = new Vue({
            el: '#app',
            data: {
                items: "test"
            },
            methods: {
                test: function (evt) {
                    console.log(evt);
                }
            }
        })
    </script>

只有当点击到非div class=’b’的区域时，才会触发事件；

### ④自定义按键别名： ###

规范：

Vue.directive(“on”),keyCode.别名 = 按键码;

示例：

Vue.directive("on").keyCode.z = 122;

这个指键盘码为122（小写z）的别名命名为z，当按键键盘的z键时（无论大小写），都会触发事件。

注意，这个要写在实例声明之后（推测是要含有该按键的template被创建后才有效）