浅入深出Vue:事件处理
上一篇的最后留下了一个 v-on
的思考,也就是本章的主题:事件处理
为什么需要事件处理
在前端开发中,经常要面对各种表单、按钮。而这里面就住着一个事件:点击 (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
在这方便提供了事件修饰符,目的就是为了避免开发者们手动去处理原生事件的一些逻辑。
语法如下:
<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>
先看看点击前的效果:
现在是黑色的,点击之后:
毫无疑问这里肯定是白色的,重点是接下来的一次点击!:
没有变化,依旧是白色,再点一次,还是白色。.once
修饰符很好的解决了我们的需求。
写在文末
至此,对于 vue
中的一些基础语法,事件我们已经有了初步的了解和使用了。
接下来将要一起学习路由与组件这两大Boss了,有了它们,vue
开发会变得更加有趣和多变。
浅入深出Vue:事件处理的更多相关文章
- 浅入深出Vue:环境搭建
浅入深出Vue:环境搭建 工欲善其事必先利其器,该搭建我们的环境了. 安装NPM 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版本的NodeJS Windows安装程序 下载下来后,直 ...
- 浅入深出Vue:工具准备之PostMan安装配置及Mock服务配置
浅入深出Vue之工具准备(二):PostMan安装配置 由于家中有事,文章没顾得上.在此说声抱歉,这是工具准备的最后一章. 接下来就是开始环境搭建了~尽情期待 工欲善其事必先利其器,让我们先做好准备工 ...
- 浅入深出Vue:工具准备之WebStorm安装配置
浅入深出Vue之工具准备(一):WebStorm安装配置 工欲善其事必先利其器,让我们先做好准备工作吧 导航篇 WebStorm安装配置 所有工具的下载地址都可以在导航篇中找到,这里我们下载的是最新版 ...
- 浅入深出Vue系列
浅入深出Vue导航 导航帖,直接点击标题即可. 文中所有涉及到的资源链接均在最下方列举出来了. 前言 基础篇 浅入深出Vue:工具准备之WebStorm搭建及配置 浅入深出Vue之工具准备(二):Po ...
- 浅入深出Vue:前言
浅入深出Vue系列文章 之前大部分是在做后端,后来出于某些原因开始接触Vue.深感前端变化之大,各种工具.框架令人眼花缭乱.不过正是这些变化,让前端开发更灵活. 博主在刚开始时,参考官网的各个步骤以及 ...
- 浅入深出Vue:第一个页面
今天正式开始入门篇,也就是实战了~ 首先我们是要做一个博客网站,UI 框架采用江湖传闻中的 ElementUI,今天我们就来利用它确定我们博客网站的基本布局吧. 准备工作 新建一个vue项目(可以参考 ...
- 浅入深出Vue:代码整洁之封装
深入浅出vue系列文章已经更新过半了,在入门篇中我们实践了一个小小的项目. <代码整洁之道>一书中提到过一句话: 神在细节中 这句话来自20世纪中期注明现代建筑大师 路德维希·密斯·范·德 ...
- 浅入深出Vue:文章列表
终于到我们小项目的最后一个功能了,那就是列表页展示! 新建组件 先来新建组件 List.vue: <template> <div></div> </templ ...
- 浅入深出Vue:自动化路由
在软件开发的过程中,"自动化"这个词出现的频率是比较高的.自动化测试,自动化数据映射以及各式的代码生成器.这些词语的背后,也说明了在软件开发的过程中,对于那些重复.千篇一律的事情. ...
随机推荐
- 右键计算机->属性->高级系统设置->高级->环境变量,添加环境变量(推荐)
(1)右键计算机->属性->高级系统设置->高级->环境变量,添加环境变量(推荐) QTDIR:D:\Software\Qt\Qt5.2.0\5.2.0\msvc2010_op ...
- 使用python移动飞信模块发送短信
作者:miaoo 1.应用场景 由于自己做的一个系统需要用到发送短信到自己手机的功能,于是搜索了一下,发现了一个通过移动飞信通道发送短信开源库:PyFetion PyFetion 模拟实现了飞信的通信 ...
- Folly: Facebook Open-source Library Readme.md 和 Overview.md(感觉包含的东西并不多,还是Boost更有用)
folly/ For a high level overview see the README Components Below is a list of (some) Folly component ...
- WPF使用MediaElement显示gif图片
原文:WPF使用MediaElement显示gif图片 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/SANYUNI/article/details ...
- OpenGL(九) 三维混色和深度缓存设置
颜色的混合在现实世界中非常常见,例如隔着有色玻璃观看物体,此时在观察者严重呈现出来物体的颜色就是玻璃的颜色和物体的颜色的混合. OpenGL在RGBA颜色模式下使用函数glenable(GL_BLEN ...
- PL/SQL 异常处理程序
异常处理程序 一个好的程序应该能够妥善处理各种错误情况,并尽可能从错误中恢复.ORACLE 提供异常(EXCEPTION)和异常处理(EXCEPTION HANDLER)错误处理 ①有三种类型的 ...
- Ubuntu+NDK编译openssl(为了Android上使用libcurl且支持HTTPS协议)
为了Android上使用libcurl且支持HTTPS协议,需要依赖openssl,因此先来了解一下如何编译OpenSSL1.编译ARM下的共享库(默认的)我使用的是guardianproject的o ...
- Debian7离线升级bash漏洞—然后修复方法
### 昨天还说的传说要又一次出补丁,今天就都出来了.基本操作一致就是測试结果不一样.继续修复 Debian7 wheezy版本号的bash漏洞,例如以下操作: 1.測试是否须要升级 # env x= ...
- 关于 IIS 上运行 ASP.NET Core 站点的“HTTP 错误 500.19”错误
昨天回答了博问中的一个问题 —— “HTTP 错误 500.19 - Internal Server Error dotnetcore”,今天在这篇随笔中时候事后诸葛亮地小结一下. 服务器是 Wind ...
- wpf 复制/剪切到本地系统剪切板中以供右键粘贴用
原文:wpf 复制/剪切到本地系统剪切板中以供右键粘贴用 http://www.cnblogs.com/yhdkzy/archive/2012/11/27/2790655.html /// & ...