vue基础之事件

简介: vue中的事件1. 事件绑定在vue中,事件的绑定使用vue指令来完成,我们需要使用v-on指令来完成事件的绑定,v-on指令可以简写为@,如下:

vue中的事件

1. 事件绑定

在vue中,事件的绑定使用vue指令来完成,我们需要使用v-on指令来完成事件的绑定,v-on指令可以简写为@,如下:

<div id="app">
    <button v-on:click="handleClick">按钮</button>
复制代码

如上面代码所示:

vue绑定事件的写法为 v-on:事件名 = "事件处理函数",当然我们也可以使用简写形式:@事件名 = "事件处理函数"

前面是事件在html中的写法,后面是事件在vue中的写法。

在vue实例化对象中,我们需要将事件处理函数写在methods对象中,最终这个方法会出现在vue实例化的对象中,如下:

var vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello world'
        },
        methods: {
            handleClick: function () {
                alert('hello world')
            }
        }
    })
复制代码

那为什么我们不直接将方法写在data中,这样不是更方便吗?其实这样写是不行的,因为vue会将data中的数据进行数据劫持,当数据发生变化时,会通知视图进行更新,但是方法是不会进行数据劫持的,所以当方法发生变化时,视图不会进行更新。

也就是说,如果我们将事件处理函数写在data中,那么这些函数vue会给我们做一个数据代理,这样极大地浪费了资源,导致页面运行缓慢。

注意:

在前面我们提到了两种遭html中绑定事件的写法,那么这两种写法有什么区别呢?

  • v-on:click = "methods"这个写法我们不能再传递参数,但是@click = "methods()"可以传递参数。

2. 事件修饰符

在vue中常见的事件修饰符有:

  • prevent: 阻止默认事件(如:阻止a标签的跳转)
  • stop:阻止事件的冒泡
  • once:只执行一次事件处理函数
<div id="app">
    <button v-on:click="handleClick">按钮</button>
    <a href="https://juejin.cn" v-on:click.prevent="handleClick">百度</a>
    <button v-on:click = "handleClick1">
            <button v-on:click.stop="handleClick">按钮</button>
    </button>
    <button v-on:click.once="handleClick">按钮</button>
复制代码

在上面的代码中,我们可以看到,我们使用了三种事件修饰符,分别是preventstoponce,这三种事件修饰符的作用分别是:

  • prevent:阻止了a标签的跳转页面
  • stop:阻止了按钮的冒泡(因为在vue中,事件默认是冒泡)
  • once:设定了这个按钮只能点击一次,点击一次之后再点击就没有反应了

这三种修饰符是比较常见的,还有几种我们不是经常用到的,这里我们提几句:

  • self:只有当事件是从该元素本身触发时才会触发
  • capture:使用事件捕获模式(改变事件的触发顺序)
  • passive:被动事件监听器(提高性能:事件的默认行为立刻执行,无需等到vue的事件处理函数执行完毕)

如果在同一个事件上需要多种修饰符,那么我们可以这样写:

<button v-on:click.stop.prevent="handleClick">按钮</button>
复制代码

这样就可以在点击按钮的时候阻止事件的冒泡,又可以阻止默认事件。

3.键盘事件

在vue中,键盘事件有三种:

  • keydown:按下键盘时触发
  • keypress:键盘按住时触发
  • keyup:键盘抬起时触发
<div id="app">
    <input type="text" v-on:keydown="handleKeydown">
    <input type="text" v-on:keypress="handleKeypress">
    <input type="text" v-on:keyup="handleKeyup">
复制代码

在键盘事件中,同样也有着事件修饰符,下面我会列举一些常见的键盘修饰符:

键盘修饰符 解释 备注
enter 回车键
tab tab键 必须配合keydown使用
delete 删除键 delete/backspace
esc esc键
space 空格键
up 上箭头
down 下箭头
left 左箭头
right 右箭头
ctrl ctrl键
alt alt键
shift shift键
meta meta键

上面这些就是vue根据我们常用的键位设置的属性,我们可以直接在事件绑定的时候使用。

就像这样@keyup.enter = "methods",这样就可以监听到回车键的事件了。

但是需要注意的是:

  • 修饰符可以串联,如:@keyup.enter.alt = "methods"
  • 系统修饰键比较特殊: (1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才可以触发 (2).配合keydown使用:正常触发事件

虽然vue给我们准备了很多常见的键位,但是在实际开发中,难免会有一些特殊的键位,需要我们自定义:

不要担心,vue提供了一个方法,可以让我们自定义键位:

<div id="app">
    <input type="text" v-on:keyup.自定义按键名="handleKeyup">
复制代码
Vue.congig.keyCodes.自定义按键名 = 按键值;


目录
打赏
0
0
0
0
0
分享
相关文章
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
161 1
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
78 12
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
114 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
85 1
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章