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 相关文章推荐
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
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
dedecms模板标签代码官方参考
2007/03/17 PHP
php strcmp使用说明
2010/04/22 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
PHP的可变变量名的使用方法分享
2012/02/05 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
Python简单实现子网掩码转换的方法
2016/04/13 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
解决python报错MemoryError的问题
2018/06/26 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
文科毕业生自荐书范文
2014/04/17 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
应届毕业生自荐信
2015/03/04 职场文书
2014年个人总结范文
2015/03/09 职场文书
教师继续教育反思周记
2015/06/25 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS