详解Vue 方法与事件处理器


Posted in Javascript onJune 20, 2017

方法与事件处理器

方法处理器

可以用 v-on 指令监听 DOM 事件:

<div id="example">
 <button v-on:click="greet">Greet</button>
</div>

我们绑定了一个单击事件处理器到一个方法 greet。下面在 Vue 实例中定义这个方法:

var vm = new Vue({
 el: '#example',
 data: {
  name: 'Vue.js'
 },
 // 在 `methods` 对象中定义方法
 methods: {
  greet: function (event) {
   // 方法内 `this` 指向 vm
   alert('Hello ' + this.name + '!')
   // `event` 是原生 DOM 事件
   alert(event.target.tagName)
  }
 }
})

// 也可以在 JavaScript 代码中调用方法
vm.greet() // -> 'Hello Vue.js!'

内联语句处理器

除了直接绑定到一个方法,也可以用内联 JavaScript 语句:

<div id="example-2">
 <button v-on:click="say('hi')">Say Hi</button>
 <button v-on:click="say('what')">Say What</button>
</div>

new Vue({
 el: '#example-2',
 methods: {
  say: function (msg) {
   alert(msg)
  }
 }
})

类似于内联表达式,事件处理器限制为一个语句。

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法:

<button v-on:click="say('hello!', $event)">Submit</button>
// ...
methods: {
 say: function (msg, event) {
  // 现在我们可以访问原生事件对象
  event.preventDefault()
 }
}

事件修饰符

在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。尽管我们在方法内可以轻松做到,不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。

为了解决这个问题,Vue.js 为 v-on 提供两个 事件修饰符:.prevent 与 .stop。你是否还记得修饰符是点号打头的指令后缀?

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

1.0.16 添加了两个额外的修饰符:

<!-- 添加事件侦听器时使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

按键修饰符

在监听键盘事件时,我们经常需要检测 keyCode。Vue.js 允许为 v-on 添加按键修饰符:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难,Vue.js 为最常用的按键提供别名:

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名: 

enter
tab
delete
esc
space
up
down
left
right

1.0.8+: 支持单字母按键别名。

1.0.17+: 可以自定义按键别名:

// 可以使用 @keyup.f1
Vue.directive('on').keyCodes.f1 = 112

为什么在 HTML 中监听事件?

你可能注意到这种事件监听的方式违背了传统理念 “separation of concern”。不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护困难。实际上,使用 v-on 有几个好处:

1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

2.因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。

3.当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
jQuery 选择器理解
Mar 16 Javascript
js取模(求余数)隔行变色
May 15 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
javascript实现滚动条效果
Mar 24 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
微信小程序实现倒计时功能
Nov 19 Javascript
Vue Ajax跨域请求实例详解
Jun 20 #Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 #Javascript
详解Angular的8个主要构造块
Jun 20 #Javascript
vue之数据交互实例代码
Jun 20 #Javascript
jquery加载单文件vue组件的方法
Jun 20 #jQuery
Angular.JS中select下拉框设置value的方法
Jun 20 #Javascript
原生js二级联动效果
Jun 20 #Javascript
You might like
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
Vue性能优化的方法
2020/07/30 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python 系统调用的实例详解
2017/07/11 Python
Python实现屏幕截图的两种方式
2018/02/05 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
python输出决策树图形的例子
2019/08/09 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
python文件读取失败怎么处理
2020/06/23 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
2020/04/10 HTML / CSS
英文求职信范文
2014/05/23 职场文书
绿色环保口号
2014/06/12 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers