v-on指令
一、用法
- 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
- 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
二、v-on语法糖：@
三、v-on参数
- 当通过methods中定义方法，以供@click调用时，需要注意参数问题：
- 如果该方法不需要额外参数，那么方法名后的()可以不添加，但是注意，如果方法本身有一个参数，那么会默认将原生事件event参数传递进去
- 如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type='text/javascript' src='js/vue.js'></script>
</head>
<body>
<div id="app">
<h2>{{counter}}</h2>
<button @click="increment">+</button>
<button @click="incrementAdd(5,$event)">+5</button>
</div>
<script type='text/javascript'>
const app = new Vue({
el:'#app',
data:{
counter:0
},
methods:{
increment(event){
console.log(event);
this.counter++;
},
incrementAdd(count , event){
console.log(event);
this.counter += count
}
}
})
</script>
</body>
</html>
四、常用v-on修饰符
- .stop — 调用event.stopPropagation()，可以使用此修饰符阻止事件冒泡
- .prevent — 调用 event.preventDefault(),阻止默认行为
- .{keyCode | keyAlias} ---- 只当事件是从特定键触发时才触发回调
- .native ---- 监听组件根元素的原生事件
- .once ----- 只触发一次回调
- .left ---- (2.2.0) 只当点击鼠标左键时触发
- .right ---- (2.2.0) 只当点击鼠标右键时触发
- .middle ---- (2.2.0) 只当点击鼠标中键时触发
- .passive ---- (2.3.0) 以 { passive: true } 模式添加侦听器
- .capture ---- 添加事件侦听器时使用 capture 模式
- .self ---- 只当事件是从侦听器绑定的元素本身触发时才触发回调
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type='text/javascript' src='js/vue.js'></script>
</head>
<body>
<div id="app">
<!--1 .stop修饰符 -- 阻止事件冒泡 -->
<div @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
<br>
<!--2 .prevent修饰符 -- 阻止默认事件 -->
<form action="baidu">
<input type="text">
<!-- 点击submit后默认自动提交表单 -->
<input type="submit" value="立即提交">
<!-- 若不想使其自动提交 -->
<input type="submit" value="不会立即提交" @click.prevent="submitClick">
</form>
<br>
<!--3 .{keyCode|keyAlias}监听某个键盘的键的点击 -->
<!-- 1)每当键盘中的按键弹起就会打印一次，监听所有按键 -->
<input type="text" @keyup="keyUp">
<br>
<!-- 2)单独监听某一按键,例如单独监听enter,当点击enter时会打印 -->
<input type="text" @keyup.enter="enterClick">
<br>
<!--4 .once:只触发一次回调 -->
<button @click.once="btn2Click">按钮2</button>
</div>
<script type='text/javascript'>
const app = new Vue({
el:'#app',
data:{
},
methods:{
btnClick(){
console.log("btnClick");
},
divClick(){
console.log("divClick");
},
submitClick(){
console.log("submitClick");
},
keyUp(){
console.log("keyup");
},
enterClick(){
console.log("enter");
},
btn2Click(){
console.log("button2click");
}
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
