vue:Vue中的事件和方法

事件绑定

v-on:click="methodFun" //注意方法名后面不要跟()

var app= new Vue({
	el:"#app',
    data:{
    	counter:0
    },
    methods:{
    	methodFun:function(){
       ...
       
           handleClick:function(var1,event){

           }
        }
    }
})

//如果需要事件对象

@click="methodFun(var1,$event)" //$event 是vue内置的事件对象

var app = new Vue({
		...
  
  	methods:{
      methodFun:function(var1,event){
      	event:preventDefault();
        window.alert(var1);
      }
    }

})

原生html元素绑定事件 可以直接@事件名称
自定义组件绑定原生事件写法必须是@事件名.native 如：@click.native=“handleFun"

修饰符

• .stop //阻止冒泡
• .prevent //取消默认行为
• .capture
• .self
• .once //只触发一次

//可以@click.stop也可以串联使用 
<a @click.stop.prevent></a>
<input @keyup.13="submit">  

//自定义按键
Vue.config.keyCOdes.f1 = 112;
//@keyup.f1

其他快捷键名

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

这些按键修饰符也可以组合使用,或和鼠标一起配合使用

• .ctrl
• .alt
• .shift
• .meta(command,windows）

//ctr+S
@keyup.ctrl.83 = “保存文件操作”