详解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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
javascript实时获取鼠标坐标值并显示的方法
Apr 30 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
微信小程序实现图片上传功能
May 28 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
谈谈JavaScript中的函数
Sep 08 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
十天学会php之第四天
2006/10/09 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
用js重建星际争霸
2006/12/22 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
jQuery实现首页图片淡入淡出效果的方法
2015/06/10 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
js中less常用的方法小结
2017/08/09 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
微信小程序中使用wxss加载图片并实现动画效果
2018/08/13 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Python3.4解释器用法简单示例
2019/03/22 Python
pyqt5实现登录界面的模板
2020/05/30 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
用python给自己做一款小说阅读器过程详解
2019/07/11 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
详解python中的闭包
2020/09/07 Python
Django Form常用功能及代码示例
2020/10/13 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
美体小铺英国官网:The Body Shop英国
2017/01/24 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
医师定期考核实施方案
2014/05/07 职场文书
高中课程设置方案
2014/05/28 职场文书
《所见》教学反思
2016/02/23 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书