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>
增加事宜侦听器时运用事宜捕捉形式<div @click.capture="handle">...</div>
只当事宜在该元素自身(不是子元素)触发时实行回调<div @click.self="handle">...</div>
只触发一次,组件一样实用<div @click.once="handle">...</div>

在表单元素上监听键盘事宜时,还能够运用按键修饰符。

修饰符功用运用示例
只要在keyCode13时挪用vm.submit()<input @keyup.13="submit">

除了详细的某个keyCode外,Vue还供应了一些快速称号:

  • .enter
  • .tab
  • .delete(补货“删除”和“退格”键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

这些按键修饰符也能够组合运用,或和鼠标一同合营运用:

  • .ctrl
  • .alt
  • .shift
  • .meta
    原文作者:whjin
    原文地址: https://segmentfault.com/a/1190000018554610
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞