详解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网页关闭时提醒效果脚本
Oct 22 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
Dec 26 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
Vue实现选择城市功能
May 27 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
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 字符串操作入门教程
2006/12/06 PHP
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
2013/02/26 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
Python开发编码规范
2006/09/08 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
Python+redis通过限流保护高并发系统
2020/04/15 Python
Python 代码调试技巧示例代码
2020/08/11 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
房屋租赁授权委托书范本
2014/09/20 职场文书
苏州园林导游词
2015/02/03 职场文书
会计求职信怎么写
2015/03/20 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
寻找成龙观后感
2015/06/12 职场文书