Vue基础语法之v-on
2019-05-14 本文已影响0人
最底层的技术渣
一、js文件
var app = new Vue({
el:'#app',
methods:{
onClick:function(){
console.log('onClick')
},
onEnter:function(){
console.log("onEnter")
},
onOut:function(){
console.log("onOut")
},
onSubmit:function(e){
e.preventDefault();
console.log("onSubmit")
},
onSubmit2:function(){
console.log("onSubmit2")
},
onKeyup:function(){
console.log("onKeyup")
}
}
});
二、html文件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
<button v-on="{mouseenter:onEnter,mouseout:onOut}" @click="onClick">点击</button>
<form @submit="onSubmit($event)" action="">
<input type="text">
<button type="submit">提交</button>
</form>
<form @submit.prevent="onSubmit2" action="">
<input type="text">
<button type="submit">提交</button>
</form>
<form v-on:keyup="onKeyup" v-on:submit.prevent="onSubmit2" >
<input type="text">
<button type="submit">提交</button>
</form>
<form @keyup.enter="onEnter" v-on:submit.prevent="onSubmit2" >
<input type="text">
<button type="submit">提交</button>
</form>
</div>
</div>
</body>
<script src="lib/js/vue.js"></script>
<script src="asset/js/v-on.js"></script>
</html>
三、效果展示
effect.gif
四、代码对比
五、备注：
v-on: 在某些时候可以使用简写
@符号
一、直接绑定事件：
@事件名="方法" => @click="onClick"
methods:{
onClick:function(){
console.log('onClick')
}
}
二、绑定事件类
v-on="{事件:方法}" => v-on="{mouseenter:onEnter,mouseout:onOut}"
methods:{
onEnter:function(){
console.log("onEnter")
},
onOut:function(){
console.log("onOut")
},
}
三、阻止默认形为（提交时刷新）
v-on:事件="方法($event)" => @submit="onSubmit($event)"
methods:{
onSubmit:function(e){
e.preventDefault();
console.log("onSubmit")
}
}
四、阻止默认形为二（提交时刷新）
v-on:事件.行为="方法" => @submit.prevent="onSubmit2"
// @submit.stop="onSubmit2"
methods:{
onSubmit2:function(){
console.log("onSubmit2")
}
}
五、键盘事件（最好配合阻止默认行为一起使用）
v-on:事件.键值="方法" => @keyup.enter="onEnter"
methods:{
onKeyup:function(){
console.log("onKeyup")
}
}
