vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件

发布时间:2019-04-02 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件

v-on:click/mouseover...... =""事件对象: @click</span>="show($event)"<br><span style="color: #000000;"&gt; 事件冒泡: 阻止冒泡: a). ev.cancelBubble</span>=<span style="color: #0000ff;"&gt;true</span><span style="color: #000000;"&gt;; b). @click.stop 推荐<br> 默认行为(默认事件): 阻止默认行为: a). ev.preventDefault(); b). @contextmenu.prevent 推荐<br> 键盘: @keydown $event ev.keyCode @keyup 常用键: 回车 a). @keyup.</span>13<span style="color: #000000;"&gt; b). @keyup.enter 上、下、左、右 @keyup</span>/keydown.left @keyup/keydown.right @keyup/keydown.up @keyup/keydown.down .....</pre>

 

简写的:  @click=""   推荐
> >
事件对象:@click="show($event)"
window.onload='#box' },methods:{ show:</span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt;(ev,b){ alert(ev.clientX); alert(b); } } }); };

<div id="box">
<input type="button" value="按钮" @click="show(<span style="color: #ff0000;">$event,112)">

事件冒泡,
阻止冒泡:
a). ev.cancelBubble=true;

window.onload='#box'1 },show2:2<div id="box">
<div <span style="color: #ff0000;">@click="show2()"
>
<input type="button" value="按钮" <span style="color: #ff0000;">@click="show($event)"
>

 

b). @click.stop 推荐

>

默认行为(默认事件):
阻止默认行为:
a). ev.preventDefault();

window.onload='#box'1 } } }); };

<div id="box">
<input type="button" value="按钮" @contextmenu="show($event)">

 

b). @contextmenu.prevent 推荐

="show()">

键盘事件:
@keydown $event  ev.keyCode

window.onload='#box'); } } }); };

<div id="box">
<input type="text" <span style="color: #ff0000;">@keydown="show(<span style="color: #ff0000;">$event)">

@keyup

window.onload=function(){ new Vue({ el:'#box',methods:{ show:function(ev){ alert(ev.keyCode); } } }); };

="show($event)">

 

常用键:
1、回车
a). @keyup.13
b). @keyup.enter

window.onload='#box''您按回车了'

="show()">

 

2、上、下、左、右
@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down

window.onload='#box'"你按了左箭头←"
="show()">

 



总结

以上是脚本之家为你收集整理的vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件全部内容,希望文章能够帮你解决vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签:vue教程1-05 事件 简写、事件对象、冒泡、默认行为、键盘事件
猜你在找的Vue相关文章
其他相关热搜词更多
CSSHTMLNode.jscocosvue.jsrailsangularJSJsHTML5bashreactangularCSS3实现脚本依赖Luabootstrapspring问题
全站导航更多
最新Vue教程
热门Vue教程