详解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 相关文章推荐
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
两种js监听滚轮事件的实现方法
May 13 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
Node.js中的异步生成器与异步迭代详解
Jan 31 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
基于pear auth实现登录验证
2010/02/26 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JavaScript模拟push
2016/03/06 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
2019/07/11 jQuery
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python检查ping终端的方法
2019/01/26 Python
Python中捕获键盘的方式详解
2019/03/28 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
EJB的几种类型
2012/08/15 面试题
介绍一下JMS编程步骤
2015/09/22 面试题
舞蹈教育学专业推荐信
2013/11/27 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL