详解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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
使用Ajax实现进度条的绘制
Apr 07 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
python3生成随机数实例
2014/10/20 Python
python解析xml文件实例分析
2015/05/27 Python
python实现DES加密解密方法实例详解
2015/06/30 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
基于python 字符编码的理解
2017/09/02 Python
python脚本实现验证码识别
2018/06/07 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
有机童装:Toby Tiger
2018/05/23 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
环境工程求职简历的自我评价范文
2013/10/24 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
计算机专业自荐信
2015/03/05 职场文书