vue Method 事件

vue事件监听通过v-on指令配置在HTML中，相当于原生的addEventListener。所有的vue事件处理方法和表达式都严格绑定在当前视图的ViewModel上，采v-on指令有如下好处：
1）通过查看HTML模板便能轻松定位对应的方法
2）ViewModell和DOM完全解耦，易于测试
3）当一个ViewModel被销毁，所有的事件处理器都会自动删除

//绑定单击事件处理器click
<div v-on:click="greet">点击问候</div>
//简写
<div @click="greet">点击问候</div>

内联方式下一个事件处理器只能绑定一个方法，若需要绑定多个方法，只能通过原生addEventListener方法来绑定。

var vm = new Vue({
	el: '#app',
	methods: {
		greet() {
			console.log(’hello‘)；
		}
	}
})
// 也可以在javascript中调用
vm.greet();

需要注意的地方：
1）methods中定义的方法内的this始终指向创建的vue实例
2）与事件绑定的方法支持参数event即原生DOM事件的传入
3）方法用在普通元素上时，只能监听原生DOM事件；用在自定义元素组件上时，也可以监听子组件触发的自定义事件

<div @click="greet('hello', $event)"></div>

methods: {
	greet(msg, event) {
		event.preventDefault(); // 我们可以通过event访问原生事件对象
	}
}

• prevent：用于阻止事件的默认行为，使之在HTML中便能完成操作

//使提交事件不再重载页面
<form @submit:prevent="onSubmit"></form>

• stop ：用于阻止事件冒泡

//阻止单击事件冒泡
<div @click.stop="deThis"></div>

• capture：表示添加事件侦听器时采用捕获模式

<div @click.capture="doThis"></div>

• self：当事件在该元素本身而非子元素触发时 触发回调

<div @click.self="doThis"></div>

• 按键：监听键盘事件

<input @keyup.13="submit"></div>
//同上
<input @keyup.enter="submit"></div>

完整的按键别名如下：
.enter(13)
.tab(9)
.delete(46)
.esc(27)
.space(32)
.up(38)
.down(40)
.left(37)
.right(39)

//1.0
<div @click="handleClick" @keyup="handleKeyUp" @keydown="handleKeyDown"></div>

最后

以上就是明理向日葵为你收集整理的vue Method 事件的全部内容，希望文章能够帮你解决vue Method 事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。