Vue.js每天必学之方法与事件处理器


Posted in Javascript onSeptember 06, 2016

方法处理器

可以用 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 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

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

Javascript 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
使用正则替换变量
May 05 Javascript
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
基于JavaScript实现购物网站商品放大镜效果
Sep 06 #Javascript
AngularGauge 属性解析详解
Sep 06 #Javascript
AngularJS 面试题集锦
Sep 06 #Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 #Javascript
JS原型链 详解及示例代码
Sep 06 #Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 #Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 #Javascript
You might like
PHP学习 变量使用总结
2011/03/24 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
PHP实现的简单适配器模式示例
2017/06/22 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python实现点对点聊天程序
2018/07/28 Python
python实现Virginia无密钥解密
2019/03/20 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Python解析微信dat文件的方法
2020/11/30 Python
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
高中自我鉴定
2013/12/20 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
工厂标语大全
2014/10/06 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
教师培训学习心得体会
2016/01/21 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android