浅谈Vue.js 中的 v-on 事件指令的使用


Posted in Javascript onNovember 25, 2018

v-on 事件指令用于绑定事件。

1 基础用法

v-on 指令绑定事件后,就会监听相应的事件。

html:

<div id="app">
 <h3>已点击 {{count}} 次</h3>
 <button @click="count++">点我</button>
</div>

注意: @clickv-on:click 的简写形式, @ 即表示 v-on:

js:

<script>
 var app = new Vue({
  el: '#app',
  data: {
   count:0
  }
 });
</script>

效果:

浅谈Vue.js 中的 v-on 事件指令的使用

@click 表达式即可以直接使用 js 语句,也可以是一个定义在 vue 实例中 methods 内的函数名。

html:

<button @click="quickAdd(3)">快速增长</button>

js:

methods: {
 quickAdd: function (i) {
  i = i || 1;//为避免参数为 null 或 undefined 值,这里设定了默认值 1
  this.count += i;
 }
}

效果:

浅谈Vue.js 中的 v-on 事件指令的使用

注意: @click 调用的方法名如果不需要参数,那么可以不写括号。

使用 Vue.js 的一个好处是:当销毁 ViewModel 时,会自动销毁所有绑定在其上的事件处理器。

2 调用 DOM 事件

Vue.js 还提供了一个 $event 变量,使用它可以访问原生 DOM 事件。 $event 变量可以通过方法传入。

html:

<div id="app2">
 <a href="www.163.com" rel="external nofollow" @click="openUrl('被禁用咯',$event)">被禁用咯</a>
</div>

js:

var app2 = new Vue({
 el: '#app2',
 data: {
  count: 0
 },
 methods: {
  openUrl: function (param, event) {
   event.preventDefault();
   console.log("param:" + param);
  }
 }
});

输出结果:

param:被禁用咯

这个示例利用传入的 event 参数,禁用了原有的链接跳转逻辑。

3 事件修饰符

Vue.js 支持以下事件修饰符:

事件修饰符 示例 示例说明
.stop @click.stop 阻止单击事件冒泡。
.prevent @submit.prevent 提交页面不再重载页面。
.capture @click.capture 添加事件监听器时使用事件捕获模式。
.self @click.self 只有当单击事件是元素的自身事件时,才会触发。
.once @click.once 只触发一次。

4 按键修饰符

可以使用按键修饰符,来监听表单元素上的键盘事件。

html:

<div id="app3">
 <input @keyup.13="enterClick">
</div>

js:

var app3 = new Vue({
 el: '#app3',
 data: {},
 methods: {
  enterClick: function () {
   console.log("enterClick");
  }
 }
});

输出结果:enterClick

这个示例演示了如何通过回车按键修饰符来绑定事件函数的过程。

除了使用 keycode 来指定按键之外,我们还可以使用以下这些按键别名:

  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

还有一些按键修饰符可以组合使用,或者和鼠标一起使用:

  • .ctrl
  • .alt
  • .shift
  • .meta:Mac 下为 Command 键,Windows 下为窗口键。

html:

<div id="app4">
 <input @keyup.alt.83="save">
</div>

js:

var app4 = new Vue({
 el: '#app4',
 data: {},
 methods: {
  save: function () {
   console.log("save");
  }
 }
});

输出结果:save

这个示例,我们通过组合按键修饰符,为输入框绑定了 alt + S 事件。

本文示例( DEMO )

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

Javascript 相关文章推荐
javascript下利用arguments实现string.format函数
Aug 24 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
javascript每日必学之循环
Feb 19 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
JavaScript 原型与原型链详情
Nov 02 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 #Javascript
vue组件实践之可搜索下拉框功能
Nov 25 #Javascript
详解离线安装npm包的几种方法
Nov 25 #Javascript
vue将单页面改造成多页面应用的方法
Nov 25 #Javascript
vue下拉菜单组件(含搜索)的实现代码
Nov 25 #Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 #Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 #Javascript
You might like
完美解决PHP中文乱码
2009/11/26 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
调试php程序的简单步骤
2019/10/04 PHP
phpfpm的作用和用法
2019/10/10 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
JS实现多功能计算器
2020/10/28 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
2013/01/21 HTML / CSS
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
个人简历自我评价
2014/01/06 职场文书
MySQL 覆盖索引的优点
2021/05/19 MySQL
Nginx动静分离配置实现与说明
2022/04/07 Servers
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技