常用事件有：点击、拖拽和键盘事件等
- v-on:click(@click) ——>注册点击事件
- v-on:keydown(@keydown) ——>注册键盘事件
- v-on:keyup(@keyup) ——>注册键盘事件
- v-on:mousedown(@mousedown) ——>注册鼠标事件
- v-on:mouseover(@mouseover) ——>注册鼠标事件
- v-on:submit(@submit) ——>注册表单事件
(1) v-on 的基本使用及语法糖
eg1：v-on注册点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script src="vue1026.js"></script>
</head>
<body>
<div id="app">
{{name}}
<button v-on:click="change">点击改变视图显示</button>
<button @click="change">语法糖—简写</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
name:"liy"
},
methods:{
change:function(){
this.name += "-yang"
}
}
});
</script>
</html>
eg2：v-on注册鼠标键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="submit">提交</button>
<div>
<span>v-on:click可简化为@click，其他事件同理将前缀v-on:简化为@</span>
<button @click="submit">提交</button>
</div>
<input type="text" placeholder="v-on:keydown" v-on:keydown="kd">
<input type="text" placeholder=" @keydown" @keydown="kd">
<input type="text" placeholder=" @keyup" @keyup="kp">
<input type="text" placeholder=" @mousedown" @mousedown="md">
<input type="text" placeholder=" @mouseover" @mouseover="mo">
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
},
methods:{
submit:function(){
alert("触发了click事件：点击了提交按钮");
},
kd:function(){
alert("触发了keydown事件：点击了键盘按键");
},
kp:function(){
alert("触发了keyup事件：点击了键盘按键");
},
md:function(){
alert("触发了mousedown事件：鼠标按下");
},
mo:function(){
alert("触发了mouseover事件：鼠标经过");
}
}
});
</script>
</html>
(2) v-on 之 参数传递
methods定义的方法供@click调用时：
- 若无需参数，方法后的()可以省略；
- 若需传参数，同时需要event（浏览器生成的event事件对象）时，可通过$event 传入事件。
- 如果方法本身有一个参数，默认会将原生事件event参数传递进去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
<div id="app">
<!-- 1. 事件调用的方法无参数 -->
<button @click="btn1Click()">按钮1</button>
<button @click="btn1Click">按钮1</button>
<!-- 2. 事件定义时，事件调用方法时省略来小括号，但是方法定义时需要一个参数时：Vue会默认将浏览器生成的event事件对象作为参数传入到方法 -->
<button @click="btn2Click">按钮2</button>
<!-- 3. 方法定义时，我们需要event对象，同时又需要其他参数时：调用时通过$event来手动获取到浏览器参数的event对象 -->
<button @click="btn3Click('liy',$event)">按钮3</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
},
methods:{
btn1Click(){
console.log('无参');
},
btn2Click(event){
console.log(event);
},
btn3Click(name,event){
console.log(name);
console.log(event);
},
}
});
</script>
</html>
(3) v-on 之 事件修饰符
- prevent(阻止默认行为) 和 stop(阻止冒泡)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
<div id="app">
<!-- type="submit"的按钮，点击时会自动提交表单，在表单上加@submit事件并用事件修饰符prevent来阻止表单默认提交事件 -->
<form @submit.prevent action="http://www.baidu.com" method="get">
<input type="text" id="username" v-model="user.uname">
<input type="password" id="pwd" v-model="user.upwd">
<input type="submit" @click="formSubmit" value="表单提交">
</form>
<!-- 多个div中都注册了事件，则可能导致冒泡，可使用事件修饰符stop(v-on:**.stop或@**.stop)来避免冒泡，如：@click.stop -->
<div @click="father">
<span>通过事件修饰符stop来阻止冒泡事件</span>
<br/>
<button @click.stop="child">点击按钮</button>
</div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
user:{
uname:"",
upwd:""
}
},
methods:{
formSubmit:function(){
alert("自定义表单提交事件：" + "username=" + this.user.uname + "," + "password=" + this.user.upwd);
},
father:function(){
console.log("触发父节点的点击事件");
},
child:function(){
console.log("触发子节点的点击事件");
}
}
});
</script>
</html>
- keycode|keyAlias（键盘事件修饰符）
当事件从特定键触发时才触发回调。参考：Vue-按键修饰符(默认按键修饰符和自定义按键修饰符).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
<div id="app">
<input @keyup.13="keyup()">
<input @keyup.enter="keyup()">
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
},
methods:{
keyup(){
console.log('键盘事件');
}
}
});
</script>
</html>
- once（只触发一次回调）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
<div id="app">
<button @click.once="btnClick()">按钮</button>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
},
methods:{
btnClick(){
console.log('点击');
}
}
});
</script>
</html>
- native（监听组件根元素的原生事件）
自定义组件时使用
网友评论