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 相关文章推荐
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
JavaScript登录验证码的实现
Oct 27 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
基于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 $_ENV为空的原因分析
2009/06/01 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
PHP限制HTML内容中图片必须是本站的方法
2015/06/16 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
python3监控CentOS磁盘空间脚本
2018/06/21 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
python getpass模块用法及实例详解
2019/10/07 Python
python实现滑雪者小游戏
2020/02/22 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
如何用Python进行时间序列分解和预测
2021/03/01 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
房地产还款计划书
2014/01/10 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
redis 查看所有的key方式
2021/05/07 Redis