浅谈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 相关文章推荐
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
详解Node.JS模块 process
Aug 31 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
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
JQuery开发的数独游戏代码
2010/10/29 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
python控制台英汉汉英电子词典
2020/04/23 Python
Python冲顶大会 快来答题!
2018/01/17 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
商场活动策划方案
2014/01/24 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
倡议书格式模板
2014/05/13 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2014小学年度工作总结
2014/12/20 职场文书
针对吵架老公保证书
2015/05/08 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis