IDEA激活码
目录
事件监听
1.基本使用
在前端开发中，我们需要经常和用户交互
这个时候，我们必须监听用户发生的事件，比如点击、拖拽、键盘事件等等
在Vue中我们用v-on指令来监听事件
缩写：@
参数:event
基本使用如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{counter}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
counter: 0,
},
methods: {
increment(){
this.counter++;
},
decrement(){
this.counter--;
}
},
})
</script>
</body>
</html>
2.参数传递问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1.事件调用的方法没有参数，方法后面的参数可省略-->
<button @click="btnClick">按钮1</button>
<button @click="btnClick()">按钮1</button>
<!-- 2.在事件定义时，写方法时省略了小括号，但是方法本身如果需要传一个参数，
那么vue会默认将浏览器产生的事件对象当作实参传入到方法中 -->
<button @click="btnClick2">按钮2</button>
<button @click="btnClick2(123)">按钮2</button>
<!-- 有小括号却什么也不传，则方法的形参就变成undefined-->
<button @click="btnClick2()">按钮2</button>
<!-- 3.方法定义时，我们需要event对象，又需要其它参数，获取事件对象：$event-->
<button @click="btnClick3(123, $event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
methods: {
btnClick(){
console.log("btnClick");
},
btnClick2(event){
console.log(event);
},
btnClick3(arg, event){
console.log(arg, event)
},
}
})
</script>
</body>
</html>
3.v-on修饰符
.stop - 调用event.stopPropagation()
.prevent - 调用event.preventDefault()
.(keyCode | keyAlias) - 当事件是从特定键触发时才触发回调
.native - 监听组件根元素的原生事件
.once - 只触发一次回调
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 1. .stop修饰符的使用，可以阻止事件的冒泡-->
<div @click="divClick">
<button @click="btnClick">按钮1</button>
<button @click.stop="btnClick">按钮1</button>
</div>
<!-- 2. .prevent修饰符的使用，阻止事件的发生-->
<br>
<form action="baidu">
<input type="submit" value="提交" @click="submitClick" >
<input type="submit" value="提交" @click.prevent="submitClick" >
</form>
<!-- 3. 监听某个键盘的键帽-->
<!-- 监听任意键-->
<input type="text" @keyup="keyUp">
<!-- 监听enter键-->
<input type="text" @keyup.enter="keyUp">
<!-- 4. .once修饰符的使用，点击回调只触发一次 -->
<button @click.once="btnClick2">按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
methods: {
btnClick(){
console.log("btnClick");
},
divClick(){
console.log("divCLick");
},
submitClick(){
console.log("submitClick");
},
keyUp(){
console.log("keyClick");
},
btnClick2() {
console.log("btnCLick2");
}
}
})
</script>
</body>
</html>
