详解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 29 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
javascript中new关键字详解
Dec 14 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 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 数组实例说明
2008/08/18 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
基于jquery自定义图片热区效果
2012/07/21 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
Vue.js中的computed工作原理
2018/03/22 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
一些你可能不熟悉的JS知识点总结
2019/03/15 Javascript
了解JavaScript中let语句
2019/05/30 Javascript
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
python列表list保留顺序去重的实例
2018/12/14 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
Python实现点云投影到平面显示
2020/01/18 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
杭州时比特电子有限公司SQL
2013/08/22 面试题
毕业赠语大全
2015/06/23 职场文书
教师远程研修感悟
2015/11/18 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
业余无线电通联Q语
2022/02/18 无线电
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android