详解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注入技巧
Jun 22 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
js的三种继承方式详解
Jan 21 Javascript
Jquery-data的三种用法
Apr 18 jQuery
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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
搜索引擎技术核心揭密
2006/10/09 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
电子商务网站上的常用的js放大镜效果
2011/12/08 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
Python常见异常分类与处理方法
2017/06/04 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python实现随机漫步方法和原理
2019/06/10 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
python实现人像动漫化的示例代码
2020/05/17 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
机电专业体育教师求职信
2013/09/21 职场文书
办公室副主任岗位职责
2013/11/25 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
活动总结书怎么写
2015/05/11 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书