8 vue 事件监听
2020-09-10 本文已影响0人
滔滔逐浪
1,v-on基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on基本使用</title>
</head>
<body>
<div id="app">
<h2> {{message}}</h2>
<h2>{{conter}}</h2>
<button v-on:click="conter++">+</button>
<button v-on:click="conter--">-</button>
<button v-on:click="incremrnt()">+</button>
<button v-on:click="decrement()">-</button>
<button @click="incremrnt()">+</button>
<button @click="decrement()">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
conter: 0
}, methods: {
incremrnt() {
return this.conter++;
}, decrement() {
return this.conter--;
}
}
})
</script>
</body>
</html>
v-on参数问题
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>v-on参数问题</title>
</head>
<body>
<div id="app">
<h2> {{message}}</h2>
<!--事件调用的方法没有参数-->
<button @click="btnclick()">按钮1</button>
<button @click="btnclick"> 按钮2</button>
<!--事件定义的时候，写函数时省略了小括号，但是方法本身需要一个参数的--->
<button @click="btnclick2()">按钮3</button>
<button @click="btnclick3(123,$event)">按钮4</button>
<button>按钮5</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message: "你好"
},
methods:{
btnclick(){
console.log("点击")
},
btnclick2(event){
console.log("点击---------------",event)
},
btnclick3(abc,event){
console.log("点击---------------",abc,event)
}
}
})
</script>
</body>
</html>
3 v-on 修饰符的作用
image.png
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>v-on修饰符的作用</title>
</head>
<body>
<div id="app">
<div @click="divClick">
aaa
<!--@click.stop阻止提交事件-->
<button @click.stop="btnClick">按钮</button>
</div></pre>
<!--2 prevent修饰符的使用阻止默认事件--->
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick()">
</form>
<!----键盘监听--->
<input type="text" @keyup.enter="keyup">
<h2> {{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
message: "你好"
},methods:{
btnClick(){
console.log("btnclick");
},
divClick(){
console.log("divclick");
},submitClick(){
console.log("submitClick");
},keyup(){
console.log('keyup');
}
}
})
</script>
</body>
</html>
