详解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判断文件是否存在
Dec 31 Javascript
JavaScript汉诺塔问题解决方法
Apr 21 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
说说Vuex的getters属性的具体用法
Apr 15 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
js中Object.create实例用法详解
Oct 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
Terran兵种对照表
2020/03/14 星际争霸
一个用于网络的工具函数库
2006/10/09 PHP
PHP异常处理浅析
2015/05/12 PHP
php简单统计在线人数的方法
2016/05/10 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
js DataSet数据源处理代码
2010/03/29 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
Javascript的比较汇总
2016/07/25 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python Django基础二之URL路由系统
2019/07/18 Python
python实现图片中文字分割效果
2019/07/22 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
opencv+python实现均值滤波
2020/02/19 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
python里glob模块知识点总结
2021/01/05 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL