Vue 事件绑定 和 修饰符

目录

一、事件绑定

        1.简介 : 

        2.实例 : 

二、修饰符

        1.简介 : 

        2.实例 : 

        3.扩展 : 

---

一、事件绑定

        1.简介 : 

        (1) 在Vue中，通过"v-on:事件名"可以绑定事件，eg : v-on:click表示绑定点击事件。

        (2) 触发事件时调用的方法，定义在Vue实例中声明的methods属性(结点)中。

        2.实例 : 

                以绑定点击事件click为例，event.html代码如下 : 

    
    
    


    

        
{{preface}}
         


        
         


         


        
         


    
    

                运行效果：(如下GIF图)

---

二、修饰符

        1.简介 : 

        修饰符Modifiers是由点.开头的指令后缀来表示的，指出某个指令以特殊方式进行绑定。

        常见修饰符如下——

•         .stop 
•         .prevent
•         .capture
•         .self
•         .once
•         .passive

...



...

        此外，Vue 允许为v-on:在监听键盘事件时添加按键修饰符，eg : 

        2.实例 : 

                在开发中，有时不希望将整个表单进行提交，而是以Ajax方式进行提交，这样，可以有选择性的提交数据，实现局部刷新，不会导致页面重载。
                以表单提交为例，使用.prevent修饰符阻止表单的正常提交，改为调用自定义的回调函数，在函数中进行相应的业务处理(此处为判断用户名是否为空)。
                modifiers_demo.html代码如下 : 

    
    
    


    

        
        

            Username :  


            
        
    
    

                运行效果 : (如下GIF图)

        3.扩展 : 

                演示.once修饰符，"v-on:click.once"表示该点击事件在同一次页面只能触发一次。
                extensive_modifiers.html代码如下 : 

    
    
    


    

        你只能点我一次捏~不信试试看
    
    

                运行效果 : （如下GIF）

                演示按键修饰符，"v-on:keyup.enter"表示按下键盘上的"Enter"键时会触发该事件，继而调用相应的函数。
                key_modifiers.html代码如下 : 

    
    
    


    

        

            Color :  

        
    
    

                运行效果：(如下GIF图)

        System.out.println("END-----------------------------------------------------------------");