详解vue.js的事件处理器v-on:click


Posted in Javascript onJune 27, 2017

用 v-on 指令监听 DOM 事件

注意:HTML5中不能使用v-on,换为@

(1)html代码:

<div id="example"> 
 <button v-on:click="greet">Greet</button> 
 // 或者 

<button @click="greet">Greet</button> 
</div>

(2)js代码:

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) 
 } 
 } 
})

 (3)效果展示:

详解vue.js的事件处理器v-on:click

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

Javascript 相关文章推荐
JavaScript实现关键字高亮功能
Nov 12 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
Js apply方法详解
Feb 16 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
微信小程序实现弹框效果
May 26 Javascript
JS写滑稽笑脸运动效果
May 28 Javascript
vue中可编辑树状表格的实现代码
Oct 31 Javascript
vue created钩子函数与mounted钩子函数的用法区别
Nov 05 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 #Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 #Javascript
js获取地址栏参数的两种方法
Jun 27 #Javascript
React组件之间的通信的实例代码
Jun 27 #Javascript
JS实现图片预览的两种方式
Jun 27 #Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 #Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 #Javascript
You might like
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
php 验证码实例代码
2010/06/01 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
Laravel 5 学习笔记
2015/03/06 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
自己动手写的javascript前端等待控件
2015/10/30 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
Python enumerate内置库用法解析
2020/02/24 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
波兰珠宝品牌:YES
2019/08/09 全球购物
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
怎样声明一个匿名的内部类
2016/06/01 面试题
厂长助理岗位职责
2013/12/27 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
商场父亲节活动方案
2014/08/27 职场文书
2015毕业寄语大全
2015/02/26 职场文书
诚信高考倡议书
2019/06/24 职场文书
Pygame Rect区域位置的使用(图文)
2021/11/17 Python