vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析


Posted in Javascript onMarch 11, 2019

本文实例讲述了vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件。分享给大家供大家参考,具体如下:

v-on:click/mouseover......

简写的:

@click=""        推荐

事件对象:

@click="show($event)"

事件冒泡:

阻止冒泡: 

    a). ev.cancelBubble=true;
    b). @click.stop    推荐

默认行为(默认事件):

阻止默认行为:

    a). ev.preventDefault();
    b). @contextmenu.prevent   推荐

键盘:

@keydown    $event    ev.keyCode
@keyup

常用键:

    回车

        a). @keyup.13
        b). @keyup.enter

    上、下、左、右

        @keyup/keydown.left
        @keyup/keydown.right
        @keyup/keydown.up
        @keyup/keydown.down
    .....

简写的:  @click=""   推荐

<input type="button" value="按钮" v-on:click="show()">
<input type="button" value="按钮" @click="show()">

事件对象:@click="show($event)"

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(ev,b){
            alert(ev.clientX);
            alert(b);
          }
        }
      });
    };
<div id="box">
    <input type="button" value="按钮" @click="show($event,112)">
  </div>

事件冒泡

阻止冒泡:

a). ev.cancelBubble=true;

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(ev){
            alert(1);
            ev.cancelBubble=true;
          },
          show2:function(){
            alert(2);
          }
        }
      });
    };
<div id="box">
    <div @click="show2()">
      <input type="button" value="按钮" @click="show($event)">
    </div>
  </div>

b). @click.stop 推荐

<div id="box">
    <div @click="show2()">
      <input type="button" value="按钮" @click.stop="show()">
    </div>
  </div>

默认行为(默认事件):

阻止默认行为:

a). ev.preventDefault();

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(ev){
            alert(1);
            ev.preventDefault();//这里阻止了右击显示菜单的事件
          }
        }
      });
    };
<div id="box">
    <input type="button" value="按钮" @contextmenu="show($event)">
  </div>

b). @contextmenu.prevent 推荐

<div id="box">
    <input type="button" value="按钮" @contextmenu.prevent="show()">
  </div>

键盘事件:

@keydown        $event  ev.keyCode

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(ev){
            alert(ev.keyCode);
          }
        }
      });
    };
<div id="box">
    <input type="text" @keydown="show($event)">
  </div>

@keyup

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(ev){
            alert(ev.keyCode);
          }
        }
      });
    };
<div id="box">
    <input type="text" @keyup="show($event)">
  </div>

常用键:

1、回车

a). @keyup.13
b). @keyup.enter

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(){
            alert('您按回车了');
          }
        }
      });
    };
<div id="box">
  <!--<input type="text" @keyup.13="show()">-->
  <input type="text" @keyup.enter="show()">
</div>

2、上、下、左、右

@keyup/keydown.left
@keyup/keydown.right
@keyup/keydown.up
@keyup/keydown.down

window.onload=function(){
      new Vue({
        el:'#box',
        data:{
        },
        methods:{
          show:function(){
            alert("你按了左箭头←");
          }
        }
      });
    };
<div id="box">
    <input type="text" @keyup.left="show()">
  </div>

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
javascript prototype,executing,context,closure
Dec 24 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
Dec 07 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
探讨Vue.js的组件和模板
Oct 27 Javascript
taro开发微信小程序的实践
May 21 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 #Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 #Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 #Javascript
angular 实现下拉列表组件的示例代码
Mar 09 #Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 #Javascript
深入理解使用Vue实现Context-Menu的思考与总结
Mar 09 #Javascript
vue模块拖拽实现示例代码
Mar 09 #Javascript
You might like
我的论坛源代码(二)
2006/10/09 PHP
php 什么是PEAR?(第三篇)
2009/03/19 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
js面向对象的写法
2016/02/19 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
手把手教你如何使用nodejs编写cli命令行
2018/11/05 NodeJs
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
查看Django和flask版本的方法
2018/05/14 Python
python for 循环获取index索引的方法
2019/02/01 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
自定义django admin model表单提交的例子
2019/08/23 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
优秀员工自荐书范文
2013/12/08 职场文书
企业内控岗位的职责
2014/02/07 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
确保工程质量承诺书
2015/04/29 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
Python中的pprint模块
2021/11/27 Python
一文搞懂Redis中String数据类型
2022/04/03 Redis