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

     

  • 相关阅读:
    mysql 索引
    springboot + maven jar打包和linux部署
    个人项目———Java实现WordCount
    第四周助教观察记录
    第三周助教工作观察记录
    2019年春-软件工程原理与方法-助教总结
    第十五周助教小结
    第十一周助教小结
    团队作业-设计 成绩汇总
    团队作业选题及需求分析成绩汇总
  • 原文地址:https://www.cnblogs.com/sun927/p/7127317.html
Copyright © 2011-2022 走看看