Vue.js办法与事件的介绍

本篇文章给大家带来的内容是关于Vue.js办法与事件的介绍，有必然的参照 价值，有需要的伴侣可以参照 一下，但愿对你有所帮忙。

办法与事件

@click调取得办法名后可以不跟括号()，假如该办法有参数，默许会将原生事件对象event传入。

这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合，违反别离的道理，实则恰好相反。由于通过HTML就可以知道调取的是哪个办法，将逻辑与DOM解耦，便于保护。

最重要的是，当viewModel烧毁时，所有的事件处置器都会主动烧毁，无需本人处置。

Vue供给了一个非凡变量$event，用于拜访原生DOM事件。

<div id="app">
    <a href="https://www.apple.com/" @click="handleClick('制止翻开',$event)">翻开链接</a>
</div>

润饰符

Vue支撑以下润饰符：

.stop

.prevent

.capture

.self.once

详细用途如下：

润饰符功效	使用示例
阻挠单击事件冒泡	<a @click.stop="handle"></a>
提交事件不再重载页面	<form @submit.prevent="handle"></form>
润饰符可以串联	<a @click.stop.prevent="handle"></a>
只要润饰符	<form @submit.prevent></form>
增加事件侦听器时使用事件捕捉模式	<p @click.capture="handle">...</p>
只当事件在该元素本身（不是子元素）触发时施行回调	<p @click.self="handle">...</p>
只触发一次，组件一样适用	<p @click.once="handle">...</p>

在表单元素上监听键盘事件时，还可以使用按键润饰符。

润饰符功效	使用示例
只要在keyCode是13时调取vm.submit()	<input @keyup.13="submit">

除了详细的某个keyCode外，Vue还供给了一些快速名称：

.enter

.tab

.delete（补货“删除”和“退格”键）

.esc

.space

.up

.down

.left

.right

这些按键润饰符也可以组合使用，或和鼠标一起配合使用：

.ctrl

.alt

.shift

.meta

本篇文章到这里就已经全部完毕了，更多关于vue.js的课程大家可以关注百分百源码网的JavaScript视频教程栏目！！！

以上就是Vue.js办法与事件的介绍的具体内容，更多请关注百分百源码网其它相关文章！