Vue的事件处理，点击事件

目录

1、 v-on:click 绑定属性示例：

2、v-on:click 绑定方法示例：

3、v-on:click 绑定特殊变量示例：

4、事件处理的修饰符

按键修饰符：

v-model表单修饰符：

v-bind指令修饰符：

监听DOM事件使用的是v-on指令，该指令通常在模板中直接使用，在触发事件时会触发执行一些JavaScript代码。Vue.js提供了v-on指令的简写形式“@”，可用“@”来代替，如v-on:click可用简写成@click

1、 v-on:click 绑定属性示例：

   点击   
{{count}}
    var demo = new Vue({        el: '#element',        data: {            count:0        }    })

2、v-on:click 绑定方法示例：

   点击    var demo = new Vue({        el: '#element',        data: {            count:0        },        methods:{            show:function(){                alert("点击调用")            }        }    })

3、v-on:click 绑定特殊变量示例：

除了绑定到一个方法之外，v-on也支持内联JavaScript语句，但只可以使用一个语句，如果在内联语句中需要获取原生的DOM事件对象，可以将一个特殊变量$event传入方法之中

   点击    var demo = new Vue({        el: '#element',        data: {            count:0        },        methods:{            show:function(message,e){                e.preventDefault();//组织浏览器默认行为                alert(message)            }        }    })

4、事件处理的修饰符

按键修饰符：

v-model表单修饰符：

        
lazy示例,光标离开输入框时，值才会同步更新
        
当前输入：{{message}}
    
number示例
        
当前输入：{{message1}}
    
trim示例
        
当前输入：{{message2}}
          var demo = new Vue({         el: '#element',         data: {             message: '',             message1:'',             message2:'',         }     })  

v-bind指令修饰符：