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 相关文章推荐
JQuery为textarea添加maxlength属性的代码
Apr 07 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
JavaScript实现图片轮播组件代码示例
Nov 22 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
JS中封装axios来管控api的2种方式
Sep 11 Javascript
JS数组属性去重并校验重复数据
Jan 10 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
基于文本的访客签到簿
2006/10/09 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
理解javascript中try...catch...finally
2015/12/25 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
angular多语言配置详解
2019/05/16 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python编程实现蚁群算法详解
2017/11/13 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
python基于http下载视频或音频
2018/06/20 Python
python获取本机所有IP地址的方法
2018/12/26 Python
python中树与树的表示知识点总结
2019/09/14 Python
Python实现像awk一样分割字符串
2020/09/15 Python
python 进程池pool使用详解
2020/10/15 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
高三英语教学反思
2014/01/13 职场文书
元旦晚会感言
2014/03/12 职场文书
大学开学计划书
2014/04/30 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书