详解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 相关文章推荐
jquery统计复选框选中示例
Nov 05 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
理解jQuery stop()方法
Nov 21 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 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
谏山创故乡大分县日田市水坝将设立《进击的巨人》立艾伦、三笠以及阿尔敏的铜像!
2020/03/06 日漫
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
php图片裁剪函数
2018/10/31 PHP
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
[01:20]PWL开团时刻DAY9——听说潮汐没用?
2020/11/10 DOTA
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
Python入门之后再看点什么好?
2018/03/05 Python
python对excel文档去重及求和的实例
2018/04/18 Python
python实现决策树分类(2)
2018/08/30 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
Python安装OpenCV的示例代码
2020/03/05 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
幼儿园小班教学反思
2014/02/02 职场文书
灵山大佛导游词
2015/02/04 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
高中运动会前导词
2015/07/20 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python