事件监听
事件监听即元素的响应函数。前面提到的methods就是用来写响应函数的。
语法：v-on:
语法糖：@
基本使用
基本使用，其实只要在需要响应的元素上写v-on:响应类型=‘响应函数名’就可以了。响应类型一般是js固定的，如click,input等
参数传递
- 事件监听并且不需要传参数的时候可以省略()
- 响应函数需要传一个参数但是调用时没加()，默认传event对象。如果加了()但没传参数，则形参为undefined
- 如果需要手动传递event对象，则传递参数$event
<body>
<div id="app">
<!-- 事件监听并且不需要传参数的时候可以省略() -->
<!-- 需要传一个参数但是没加()，默认传event对象。如果加了()但没传参数，则形参为undefined-->
<button @click="increment">+</button>
<!-- 如果需要传递event对象，则传递参数$event -->
<button @click="decrement('decrement',$event)">-</button>
</div>
<script src="..\vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data:{
counter: 0
},
methods:{
increment(name){
console.log('========',name);
},
decrement(name,event){
console.log('========',name,event);
}
}
})
</script>
</body>
v-on修饰符
这里先补充一下冒泡的概念冒泡是指点击了A事件但B包含A，则B事件也会被触发。比如某个div包含了button，此时点击button，div的点击事件也会被触发
<body>
<div id="app">
<!-- 冒泡是指点击了A事件但B包含A，则B事件也会被触发
如下:点击了button，div的点击事件也会触发-->
<!-- <div @click="divclick"> -->
<!-- <button @click="butclick">点我</button> -->
<!-- </div> -->
<div @click="divclick">
<!-- .stop修饰符停止冒泡 -->
<button @click.stop="butclick">点我</button>
</div>
<form action="baidu">
<!-- <input type="submit" value="提交" @click="submitclick">-->
<!-- .prevent修饰符 拦截默认事件 -->
<input type="submit" value="提交" @click.prevent="submitclick">
</form>
<!-- .{keycode|keyAlias} 监听某个键盘的键帽,即只有点击了此键帽才会有响应 -->
<input type="text" @keyup.enter="keyupEnter">
<!-- .once修饰符 只进行一次回调 -->
<input type="button" value="点我啊" @click.once="onceclick">
</div>
<script src="..\vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods:{
divclick(){
console.log('==========divclick');
},
butclick(){
console.log('==========butclick');
},
submitclick(){
console.log('==========submitclick');
},
keyupEnter(){
console.log('[email protected]只有按了回车才会响应');
},
onceclick(){
console.log('==========onceclick');
}
}
})
</script>
</body>
.stop 停止冒泡
.prevent 拦截默认事件
.{keycode|keyAlias} 监听某个键盘的键帽
.once 只会执行一次回调函数
