Vue 从入门到精通

最新推荐文章于 2024-08-04 12:47:40 发布

阳光下的少年－熙

最新推荐文章于 2024-08-04 12:47:40 发布

阅读量153

点赞数

分类专栏：学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/m0_57246577/article/details/119887658

版权

本文详细介绍了Vue.js中的事件监听机制，包括如何使用v-on绑定事件、不同键盘修饰符的应用、以及常见的事件修饰符如.stop、.prevent、.capture、.self和.once的作用和示例。通过实例展示如何控制事件冒泡、阻止默认行为和限制事件触发次数。

摘要由CSDN通过智能技术生成

第二章 vue开发基础（上）

1.vue 事件

1-1 事件监听：点击按钮在触发事件时执行JavaScript代码。

① 在触发事件时执行JavaScript代码：v-on 允许在触发时执行JavaScript代码。

<div id="app">
    <button v-on:click="count+=Math.random()">随机数</button>
    <p>自动生成的随机数是</p>
</div>

<script>
var vm=new Vue({
    el:'#app',
    data:{
        count:0
    }
})
</script>

② 使用按键修饰符监听按键：v-on 按键修饰符监听按键（如enter、空格、shift和PageDown等）。

<div  id="app">
    <input type="text" v-on:keyup.enter="submit">
</div>

<script>
var vm=new Vue({
    el:'#app',
    methods:{
        submit(){
            console.log('表单提交')
        }
    }
})
</script>