详解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的仿flash的广告轮播
Nov 05 Javascript
js TextArea的选中区域处理
Dec 28 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
详解js中let与var声明变量的区别
Apr 05 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插入排序实现代码
2013/04/04 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
ECMAScript5(ES5)中bind方法使用小结
2015/05/07 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
鼠标经过出现气泡框的简单实例
2017/03/17 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
《小小雨点》教学反思
2014/02/18 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
研究生简历自我评
2015/03/11 职场文书
公司人事任命通知
2015/04/20 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python