1、Vue.js v-on指令
1)、v-on用法
- v-on 指令用于绑定事件监听器,v-on 指令的简写形式为 @event。
- v-on 指令可以支持同时写多个事件监听器,多个事件监听器的简写形式为 v-on={@event1:handler1, @event2:handler2}。
- v-on 指令支持原生 JavaScript 的所有的事件,并且支持参数传递。
2)、语法
- 缩写:
@
- 预期:
Function | Inline Statement | Object
- 参数:
event
3)、v-on事件修饰符
- v-on .stop 阻止事件冒泡。
- v-on .prevet 阻止事件的默认行为。
- v-on .capture 添加事件侦听器,使用事件捕获模式。
- v-on .self 只当事件在该元素本身触发时,触发回调。
- v-on .once 事件只触发一次。
2、使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-on补充</title>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="doIt(666,'继续写Vue')">
<input type="text" @keyup.enter="sayHi">
</div>
<!-- 1.开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods: {
doIt:function(p1,p2){
console.log("前端Vue开发");
console.log(p1);
console.log(p2);
},
sayHi:function(){
alert("hello vue");
}
},
})
</script>
</body>
</html>