• 贵州省社科规划办与贵州日报社合作推出“文化贵州”专栏 2019-03-20
  • 就算不为了世界杯,俄罗斯也有那么多时髦好去处值得你飞去 2019-03-20
  • 山西二十一选五走势图:vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析

    山西体彩11选5直选遗漏 www.caxru.com  更新时间:2019年03月11日 09:06:00   作者:白杨-M   我要评论

    这篇文章主要介绍了vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件,结合实例形式分析了vue.js事件简写、冒泡及阻止冒泡等相关操作技巧,需要的朋友可以参考下

    本文实例讲述了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程序设计有所帮助。

    相关文章

    • vue-cli中的babel配置文件.babelrc实例详解

      vue-cli中的babel配置文件.babelrc实例详解

      Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。本文介绍vue-cli脚手架工具根目录的babelrc配置文件,感兴趣的朋友一起看看吧
      2018-02-02
    • Map.vue基于百度地图组件重构笔记分享

      Map.vue基于百度地图组件重构笔记分享

      这篇文章主要为大家分享了Map.vue基于百度地图组件重构笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
      2017-04-04
    • vue 系列——vue2-webpack2框架搭建踩坑之路

      vue 系列——vue2-webpack2框架搭建踩坑之路

      本文从零搭建vue项目,给大家分享了我的vue2-webpack2框架搭建踩坑之路,需要的朋友可以参考下
      2017-12-12
    • Vue.js中用v-bind绑定class的注意事项

      Vue.js中用v-bind绑定class的注意事项

      关于数据绑定一个常见需求就是操作元素的class列表和它的内联样式。因为它们都是属性,我们可以用 v-bind 处理它们,但是使用v-bind绑定class的时候我们要有一些注意事项,下面这篇文章就给大家分享了下要注意的方面,希望能对大家有所帮助,下面来一起看看吧。
      2016-12-12
    • 解决vue build打包之后首页白屏的问题

      解决vue build打包之后首页白屏的问题

      下面小编就为大家分享一篇解决vue build打包之后首页白屏的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
      2018-03-03
    • vue 本地环境跨域请求proxyTable的方法

      vue 本地环境跨域请求proxyTable的方法

      今天小编就为大家分享一篇vue 本地环境跨域请求proxyTable的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
      2018-09-09
    • vue-router3.0版本中 router.push 不能刷新页面的问题

      vue-router3.0版本中 router.push 不能刷新页面的问题

      这篇文章主要介绍了vue-router3.0版本中 router.push 不能刷新页面的问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2018-05-05
    • vue实现动态数据绑定

      vue实现动态数据绑定

      本篇文章主要介绍了vue实现动态数据绑定,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2017-04-04
    • vue绑定的点击事件阻止冒泡的实例

      vue绑定的点击事件阻止冒泡的实例

      下面小编就为大家分享一篇vue绑定的点击事件阻止冒泡的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
      2018-02-02
    • 详解vue项目接入微信JSSDK的坑

      详解vue项目接入微信JSSDK的坑

      这篇文章主要介绍了详解vue项目接入微信JSSDK的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2018-12-12

    最新评论

  • 贵州省社科规划办与贵州日报社合作推出“文化贵州”专栏 2019-03-20
  • 就算不为了世界杯,俄罗斯也有那么多时髦好去处值得你飞去 2019-03-20