zoukankan      html  css  js  c++  java
  • vue(2)

    一、事件对象:

    click="show($event)"

    二、事件冒泡:

      阻止冒泡:(1) ev.cancelBubble=true;  

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

       (2) @click.stop(推荐)

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

    三、默认事件:contextmenu(右键)

    阻止默认行为:(1) ev.preventDefault;     

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

      (2) @contextmenu.prevent(推荐)

        <script>
            window.onload=function(){
                new Vue({
                    el:"#box",
                    data:{},
                    methods:{
                        show:function(ev){
                            alert(1);                      
                        }
                    },                
                })
            }
        </script>
    
    </head>
    <body>
    <div id=box>
        <div @click="show2()">
            <input type="button" value="按钮" @contextmenu.prevent="show()">   
        </div>    
    </div>    
    </body>

     四、键盘

      @keydown      $event        ev.keyCode

      @keyup        

     五、常用键 

      回车 :

      (1)@keyup.13

      (2)@keyup.enter

     

  • 相关阅读:
    Matplotlib 绘图库 基本使用方法
    linux socat命令
    linux shell重定向
    linux man命令
    bashttpd使用手册
    libcurl代码示例
    vim文件头部注释配置
    linux join命令
    iterm2切换显示屏vim乱行解决
    分形与混沌
  • 原文地址:https://www.cnblogs.com/sun927/p/7127317.html
Copyright © 2011-2022 走看看