浅入深出Vue:事件处理

在前端开发中,经常要面对各种表单、按钮。而这里面就住着一个事件:点击 (click)。

前端童鞋们肯定不陌生它,因为经常会出现。比如说:

表单提交

各式各样的按钮

列表多级菜单折叠

v-on支持监听原生的 DOM事件,也就是 vue中也支持以前纯js写法中各式各样的时间,只是在 vue中换了一种写法。

使用事件处理的好处便在于我们可以通过事件来控制数据

MVVM中强调的一点便是数据驱动,那么在 vue中如果利用数据去驱动视图呢,上一篇讲了双向绑定。绑定上去了,如果没办法对数据进行操作,那就变成了单向渲染了。对于这个问题,解决的方案便是:事件处理,利用事件去控制数据变化,再由数据的变化驱动着视图。

事件处理是什么

这一个问题在上面已经给出答案了:

从字面上理解,它就是DOM事件,只不过在 vue中使用方式不同。

深层次理解,它是控制数据变化的控制器,是连接视图数据的桥梁。

如何使用

通过按钮标签来看一下事件处理的写法:

<button v-on:需要响应的事件名="处理事件的函数名"></button>

这里需要注意一点:

处理事件的函数名必须写在 methods中,要让当前组件实例可访问。

还是继续昨天的例子,这里让我们解决最后一个问题:

利用按钮的点击事件来改变 isDark的值。

首先页面上加上按钮:

<template> <div> <h1 v-bind:class="isDark ? 'dark' : 'light'">{{ formatTime(time) }}</h1> <a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url">{{item.text}}</a> <br/><button v-on:click="change">改变背景</button> </div> </template>

这里我们指定响应 click事件的函数名是 change,接着我们去定义我们的函数:

methods: { change: function() { this.isDark = !this.isDark } }

代码很简洁,因为这是个布尔值,我们直接取反就好了。

来看看效果:

浅入深出Vue:事件处理

现在是白色的,让我们点一下看看:

浅入深出Vue:事件处理

点完之后变黑了,再点击一次又变回白色了~ 很完美的达到了我们的要求。

还可以通过其他的事件来完成一些特效,比如:

输入框在失去焦距时的自动验证

鼠标移动到元素上时弹出提示文字

等等。

事件修饰符

如果我们只想让这个按钮生效一次怎么办?

点了一次之后,就不再让它继续变了。

vue在这方便提供了事件修饰符,目的就是为了避免开发者们手动去处理原生事件的一些逻辑。

语法如下:

<button v-on:事件名.事件修饰符="处理函数"></button>

所有的修饰符在下表列出:

.stop

.prevent

.capture

.self

.once

.passive

修饰符可以同时使用多个:

<button v-on:事件名.事件修饰符1.事件修饰符2.事件修饰符3="处理函数"></button>

上述修饰符待后面我们具体用到时再细细讲解,其中的一些修饰符拿出来甚至足够一篇长博文的内容了。

这里我们使用到的修饰符是:

.once

代码:

<template> <div> <h1 v-bind:class="isDark ? 'dark' : 'light'">{{ formatTime(time) }}</h1> <a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url">{{item.text}}</a> <!-- 在click后面添加 once 修饰符 --> <br/><button v-on:click.once="change">改变背景</button> </div> </template>

先看看点击前的效果:

浅入深出Vue:事件处理

现在是黑色的,点击之后:

浅入深出Vue:事件处理

毫无疑问这里肯定是白色的,重点是接下来的一次点击!:

浅入深出Vue:事件处理

没有变化,依旧是白色,再点一次,还是白色。.once修饰符很好的解决了我们的需求。

写在文末

至此,对于 vue中的一些基础语法,事件我们已经有了初步的了解和使用了。

接下来将要一起学习路由组件这两大Boss了,有了它们,vue开发会变得更加有趣和多变。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpzjzj.html