目录
1、.stop - 调用 event.stopPropagation()
2、.prevent - 调用 event.preventDefault()。
1、用v-on绑定事件
1、如何用v-on进行绑定
v-on就是用于绑定事件的
例如：有个按钮，当点击的时候执行一些操作
<div class="app">
<button v-on:click="myclick">click me</button>
</div>
上述代码中，
v-on:后面的值是一个方法，可以写成myclick()，没有参数可以写成myclick。
另外这种事件对应的方法不是定义在data选项中，而是定义在vue实例的methods选项中，里面都是一个一个的function
var app = new Vue({
el:'.app',
data:{
},
methods:{
myclick:function(){
console.log(111111);
}
}
});
2、v-on也可以绑定多个事件
多个事件可以单独多个v-on绑定
<div class="app">
<button v-on:mouseenter='onenter' v-on:mouseleave='leave'>click me</button>
</div>
也可以使用一个
v-on，里头用对象的形式书写，对象的键名就是事件名，对象的键值就是对应事件要执行的方法。多个事件之间通过,分开
<div class="app">
<button v-on="{mouseenter:onenter,mouseleave:leave}">click me</button>
</div>
当然也可以混合使用
<div class="app">
<button v-on="{mouseenter:onenter,mouseleave:leave}" v-on:click="myclick">click me</button>
</div>
但是需要注意，在vue实例中方法一定要有，不然就报错。
var app = new Vue({
el:'.app',
data:{
},
methods:{
myclick:function(){
console.log("clicked");
},
onenter:function(){
console.log("mouseented");
},
leave:function(){
console.log("mouseleaved");
}
}
});
3、例子：在绑定form表单中的提交事件时
<div class="app">
<form v-on:submit='onSubmit($event)'>
<!-- $event是vue里面的事件对象，vue能认识 -->
<input type="text" >
<button type="submit">提交</button>
</form>
</div>
var app = new Vue({
el:'.app',
data:{
},
methods:{
onSubmit:function(e){
e.preventDefault();
//阻止浏览器的默认行为，因为在表单提交的时候，浏览器会默认发送一个get或者post请求到指定页面，刷新整个页面。
console.log("onSubmited");
}
}
});
1、prevent修饰符
注意：
$event是vue里面的事件对象，vue能认识
在表单提交的时候，浏览器会默认发送一个get或者post请求到指定页面，刷新整个页面。阻止浏览器的默认行为，可以用事件对象e.preventDefault()但像上述form表单提交的这种浏览器默认事件，每次都要写
e.preventDefaul()其实还是比较麻烦。vue中可以更好的解决，只要在事件的后面添加一个prevent修饰符即可，表示阻止默认事件
<div class="app">
<form v-on:submit.prevent='onSubmit'>
<input type="text" >
<button type="submit">提交</button>
</form>
</div>
var app = new Vue({
el:'.app',
data:{
},
methods:{
onSubmit:function(){
console.log("onSubmited");
}
}
});
2、stop,表示停止冒泡事件
绑定事件中，除了
prevent修饰符，还有stop,表示停止冒泡事件
<div class="app">
<div v-on:click.stop='onClick'>
</div>
</div>
另外,当绑定的事件是
keyup、keypress、keydown键盘事件时，当需要判断按下是回车时。
在以前我们需要判断事件对象的keyCode，虽然功能特别简单，但是每次去写还是特别麻烦。所以对应也有修饰符，如enter修饰符，表示按键是enter键
<div class="app">
<div v-on:keydown.enter='mykeydownFn'>
</div>
</div>
3、v-on快捷方式
跟
v-bind一样，v-on也非常常用，对应也有快捷方式：**v-on:事件名** 可以简写为 **@事件名**
<div class="app">
<div @keydown.enter='mykeydownFn'>
</div>
</div> 2、v-on参数问题
1、事件调用方法没有参数
<div id="app">
<!-- 事件调用方法没有参数-->
<button @click="btnClick1()">按钮1</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
btnClick1() {
console.log("btnClick1")
}
})
</script>
2、写函数时省略了小括号，但是方法本身是需要一个参数的
这个时候Vue会默认将浏览器生产的event事件对象作为参数传入到方法
<body>
<div id="app">
<!-- 事件定义时，写函数时省略了小括号，但是方法本身是需要一个参数的,这个时候Vue会默认将浏览器生产的event事件对象作为参数传入到方法-->
<button @click="btnClick2(123)">按钮2.1</button>
<button @click="btnClick2">按钮2.2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
btnClick2(event) {
console.log("btnClick2:", event);
}
}
})
</script>
3、方法定时，我们需要event对象，同时又需要其他参数
手动获取浏览器参数event对象：$event
如果直接不加括号，第一个参数是event，后面参数的undefined
<body>
<div id="app">
<!-- 方法定时，我们需要event对象，同时又需要其他参数-->
<!-- 再调用方法时，如何手动获取浏览器参数event对象呢：$event-->
<button @click="btnClick3">按钮3.1</button>
<button @click="btnClick3('abcd',$event)">按钮3.2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
btnClick3(abc, event) {
console.log(abc, "btnClick2:", event);
}
}
})
</script>
</body>
3、v-on的修饰符
1、.stop - 调用 event.stopPropagation()
.stop修饰符可以阻止冒泡
<body>
<div id="app">
<!--1 .stop修饰符可以阻止冒泡-->
<div @click="divClick">
<button @click.stop="btnClick">按钮</button>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
btnClick() {
console.log("btnClick")
},
divClick() {
console.log("divClick")
}
}
})
</script>
</body>
2、.prevent - 调用 event.preventDefault()。
.prevent修饰符可以阻止调用 event.preventDefault()的默认行为
比如停止submit的默认提交，转而调用自己的提交函数如下：
<body>
<div id="app">
<!--2 .prevent修饰符可以阻止调用 event.preventDefault()的默认行为-->
<br>
<form action="baidu">
<input type="submit" value="提交" @click="submitClick">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
submitClick() {
console.log("submitClick")
}
}
})
</script>
</body>
3、 监听某个键盘的键帽
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
这个地方有时候需要自己查询键代码
比如下面.enter只监听enter
<body>
<div id="app">
<!-- 3 鉴定某个键盘的键帽,b比如下面.enter只监听enter-->
<input type="text" @keyup="keyUp">
<input type="text" @keyup.enter="keyUp">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
keyUp() {
console.log("keyUp")
}
}
})
</script>
</body>
4、.native - 监听组件根元素的原生事件
5、.once - 只触发一次回调
<body>
<div id="app">
<!-- 4 .once只监听一次-->
<button @click.once="btnClick2">按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
btnClick2() {
console.log("btnClick2")
}
}
})
</script>
</body>
129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
