Vue – 事件绑定v-on基本用法

本文带来v-on的基本用法，v-on是Vue中用于绑定事件的方法，简写为 @

v-on

vue 提供了v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下：

注意：原生 DOM 对象有onclick、oninput、onkeyup 等原生事件，替换为vue 的事件绑定形式后，

分别为：v-on:click、v-on:input、v-on:keyup

简写

为了方便日常开发中经常用到事件绑定，Vue提供了 v-on 的简写方式 @

<button @click="add( foo )">+1</button>

methods

methods 的作用，就是定义事件的处理函数

methods 方法定义

methods:{
    // ES5之前的定义 ->方法名 : function () { 方法体 }
    // ES6之后的定义 -> 方法名 (){ 方法体 }

    // ES5
    add : function () {},
    // ES6 (推荐使用)
    add () {} 
}

this

关于Vue2中的this问题，因为Vue2采用了数据成员的方式，在 methods 中不能直接访问其它成员的数据，需要使用 this 关键词访问

const vm = new Vue({

    methods:{
        test(){
            // 此处在于Vue内部，输出 vm 将是Vue实例本身
            console.log( vm )
            // 输出 this 也将是Vue实例本身
            console.log( this )
         }
    }
})

在 Vue 内的 vm 和 this 是相同的，因此可以使用 this 访问 Vue 实例中的其它数据源。

事件传参

可通过元素中加入 "()" 来为方法传参数

<button @click="add( foo )">+1</button>

事件对象 $event

Vue提供隐式和显式原生事件对象参数

若绑定事件中没有传参，则为隐式传递原生事件对象参数

<button @click="add">+1</button>

add(e){  e则为原生事件 }

若绑定事件中已经自定义传参，则可使用显式传递原生事件对象参数

<button @click="add(foo, $event)">+1</button>

 add(n, e){  e则为原生事件 }

注意：传参时，$event 必须固定写法，接收方法中的形参可随意写

事件修饰符

在事件处理函数中调用event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此，

vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：

语法如下：

按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如：