本文代码主要讲述了v-on绑定事件函数传参,一个元素绑定多个事件的两种写法,一个事件绑定多个函数的两种写法,修饰符的使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div >
<!-- <button v-on:click="myclick('hello','world','你好世界',$event)" >button1</button> -->
<button @click="myclick('hello','world','你好世界',$event)">点我text</button>
<!-- v-on绑定多个事件教程里这样子写,但是貌似已经不支持这样子的写法了,内联方式下事件处理器只能绑定一个方法,要是想要绑定多个事件,用下面第二行的方式-->
<!-- <button v-on="{mouseenter: onEnter,mouseleave: onLeave}">鼠标进来</button> -->
<button @mouseenter="onEnter" @mouseleave="onLeave">鼠标进来</button>
<!-- 一个事件绑定多个函数,按顺序执行,这里分隔函数可以用逗号也可以用分号-->
<button @click="a(),b()">点我ab</button>
<button @click="one()">点我onetwothree</button>
<!-- v-on修饰符 .stop .prevent .capture .self 以及指定按键.{keyCode|keyAlias} -->
<!-- 这里的.stop 和 .prevent也可以通过传入&event进行操作 -->
<!-- 全部按键别名有:enter tab delete esc space up down left right -->
<form @="onKeyup" @="onSubmit">
<input type="text" placeholder="在这里按delete">
<button type="submit">点我提交</button>
</form>
</div>
<script src=""></script>
<script>
var vm = new Vue({
el:"#app",
methods:{
//这里是es6对象里函数写法
a(){("a");},
b(){("b");},
one(){
("one");
();
();
},
two(){
("two");
},
three(){
("three");
},
myclick(msg1,msg2,msg3,event){
(msg1+msg2+"--"+msg3);
(event);
},
onKeyup(){
("you press 'delete'");
},
onSubmit(){
("sumited");
},
onEnter(){
("mouse enter");
},
onLeave(){
("mouse leave");
}
}
});
</script>
</body>
</html>