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 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
JavaScript XML操作 封装类
Jul 01 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
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
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
javascript String 的扩展方法集合
2008/06/01 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
js中的闭包学习心得
2018/02/06 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
详解python里的命名规范
2018/07/16 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
AUC计算方法与Python实现代码
2020/02/28 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
新教师工作感言
2014/02/16 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
司法助理专业自荐书
2014/06/13 职场文书
2014年共青团工作总结
2014/12/10 职场文书
转让协议书
2015/01/27 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
礼仪培训心得体会
2016/01/22 职场文书