您的位置：首页 > Web前端 > Vue.js

Vue：事件监听（事件监听、修饰符）

2020-12-15 22:06 1356 查看

1、v-on

（1）v-on的基本使用

<body>
<div id="app"
1044
>
<h2>{{num}}</h2>
<button v-on:click="increment">加</button>
<button v-on:click="decrement">减</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
increment() {
this.num++
},
decrement() {
this.num--
}
}
})
</script>
</body>

（2）语法糖

<div id="app">
<h2>{{num}}</h2>
<button @click="increment">加</button>
<button @click="decrement">减</button>
</div>

在事件监听的时候，如果函数没有参数就可以将小括号省略掉

（3）传递参数

传递一个参数

<body>
<div id="app">
<button @click="cli(123)">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
cli(message){
console.log(message);
}
}
})
</script>
</body>

获取Event对象（一个参数）

<body>
<div id="app">
<button @click="cli">
ad8
点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
cli(message){
console.log(message);
}
}
})
</script>
</body>

当方法需要传递参数但是没有传递参数的时候，默认传递的是Event对象。

获取Event对象（多个参数）

<body>
<div id="app">
<button @click="cli(123,$event)">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
cli(message,event){
console.log(message+"-----"+event);
}
}
})
</script>
</body>

需要 ad0 注意的问题是，如果传递进去的第一个参数是按照名命规范进行的命名且未加单引号就会去data里面找数据，如果data里面没有数据就会出现错误

2、修饰符

（1）stop阻止事件冒泡

在div里面定义一个button，点击button后div的click也会被触发，这就是事件冒泡

<body>
<div id="app" @click="divCli(123)">
<button @click="btnCli(233)">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
btnCli(message) {
console.log(message+'btnCli');
},
divCli(message) {
console.log(message+'divCli');
}
}
})
</script>
</body>

对click添加修饰符，冒泡即可被阻止，只有点击div的时候才会触发，点击button的时候是不会触发的

<div id="app" @click="divCli(123)">
<button @click.stop="btnCli(233)">点击</button>
</div>

（2）prevent修饰符：阻止默认行为

<body>
<div id="app">
<form action="hello.html">
<input type="submit" value="提交" v-on:click.prevent="btnCli('acx')">
</form>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
btnCli(message) {
console.log(message + 'btnCli');
}
}
})
</script>
</body>

默认的情况是，点击提交后会进行页面的跳转，在添加prevent之后会将这样的默认行为组织掉

（3）指定键盘按键的监听

<body>
<div id="app">
<input type="text" @keyup.enter="btnCli('www')">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
btnCli(message) {
console.log(message + 'btnCli');
}
}
})
</script>
</body>

这样的话只有在点击Enter键的时候事件才会触发，否则，其它键盘按键被点击后也会触发

（4）once，只有第一次的时候会触发

<body>
<div id="app">
<button @click.once="btnCli(222)">点击</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
btnCli(message) {
console.log(message + 'btnCli');
}
}
})
</script>
</body>

只有第一次点击按键的时候触发了事件

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航