详解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 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
vue接口请求加密实例
Aug 11 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中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
快速保存网页中所有图片的方法
2006/06/23 Javascript
一个js实现的所谓的滑动门
2007/05/23 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
python中定义结构体的方法
2013/03/04 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
python中wheel的用法整理
2020/06/15 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
三八妇女节演讲稿
2014/05/27 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书