vue中 点击事件的写法_vue 方法与事件

在事件绑定上，类似原生Javascript的onclick写法，也是在HTML上进行监听的。@click的表达式可以直接使用javascript语句，也可以是一个在Vue实例中methods选项内的函数名。

var app = new Vue({

el:'#app',

data: {

counter: 0

},

methods: {

handleAdd: function (count) {

count = count || 1;

//this指向当前vue实例app

this.counter += count;

}

}

})

vue提供了一个特殊变量$event,用于访问原生DOM事件

var app = new Vue({

el:'#app',

data: {

counter: 0

},

methods: {

handleClick: function (message, event) {

event.preventDefault();

window.alert(message);

}

}

})

修饰符

在上面使用的event.preventDefault()也可以用vue事件的修饰符来实现，在@绑定的事件后加小圆点“.”，再跟一个后缀来使用修饰符。

事件修饰符

.stop

.prevent

.capture

.self

.once

按键修饰符

.enter

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

系统修饰符

.ctrl

.alt

.shift

.meta

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