vue v-on监听事件详解


Posted in Javascript onMay 17, 2017

在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的。

在vue.js中监听事件是通过v-on指令来实现的,先看一下简单的监听事件代码。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <button v-on:click="count += 1">点击测试</button>
 <p>这个按钮被点击了{{count}}次</p>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data:{
   count:0
  }
 })
</script>
</html>

下面再看看监听方法事件的代码示例

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <button v-on:click="test">点击测试</button>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
   test: function (event) {
    // `this` 在方法里指当前 Vue 实例
    alert('Hello ' + this.name + '!')
    // `event` 是原生 DOM 事件
    alert(event.target.tagName)
   }
  }
 })
</script>
</html>

内联处理器方法,内联javaScript语句

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
 <button v-on:click="say('say hello')">say hello</button>
 <button v-on:click="say('say goodbye')">say goodbye</button>
</div>
</body>
<script>
 var vm = new Vue({
  el:"#app",
  data: {
   name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
   say:function(message){
    alert(message)
   }
  }
 })
</script>
</html>

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

Javascript 相关文章推荐
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
vue v-model表单控件绑定详解
May 17 #Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 #Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 #Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 #Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 #Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 #Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 #Javascript
You might like
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
php实现监听事件
2013/11/06 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
PHP静态成员变量
2017/02/14 PHP
实例讲解PHP表单处理
2019/02/15 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
教你用Cordova打包Vue项目的方法
2017/10/17 Javascript
koa源码中promise的解读
2018/11/13 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
python实现字符串和字典的转换
2018/09/29 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Pygame的程序开始示例代码
2020/05/07 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
大学生应聘自荐信
2013/10/11 职场文书
英语专业应届生求职信范文
2013/11/15 职场文书
酒店保洁主管岗位职责
2013/11/28 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
使用Python获取字典键对应值的方法
2022/04/26 Python