事件监听
v-on参数问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--如果没有参数的可以省略括号-->
<button v-on:click="btn1Func">按钮1</button>
<button v-on:click="btn1Func()">按钮4</button>
<!--传参数的时候，如果不加单引号Vue会当做一个变量去解析-->
<button @click="btn2Func('123')">按钮2</button>
<!--$event 自己手动拿到浏览器产生的event事件-->
<button @click="btn3Func('123', $event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
methods: {
btn1Func(){
console.log('按钮1被执行');
},
btn2Func(event){
console.log('-------> 按钮2被执行', event)
},
btn3Func(index, event){
console.log('-------> 按钮3被执行', index, event)
}
}
})
</script>
</body>
</html>
v-on修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" >
<div @click="divBtn">
<!--1. .stop修饰符的使用-->
<button @click.stop="btn1">按钮</button>
</div>
<!--2. .prevent(阻止默认事件)修饰符的使用-->
<br>
<br>
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitBtn">
</form>
<!--3. .keyup键盘的键帽修饰符的使用 keydown-->
<br>
<input type="text" @keyup.enter="inputBtn">
<!--4. .native监听组件根元素的原生事件-->
<!--<cpn @click.native="aaaa"></cpn>-->
<!--5 .once修饰符只触发一次-->
<button @click.once="onceClick">按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
methods: {
divBtn() {
console.log('div被触发');
},
btn1() {
console.log('button 按钮被触发');
},
submitBtn() {
console.log('submit按钮被触发');
},
inputBtn() {
console.log('inputBtn键盘键帽上去了');
},
onceClick() {
console.log('onceClick');
}
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号