详解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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
javascript编程起步(第七课)
Jan 10 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
JS根据生日算年龄的方法
May 05 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 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数据库连接类~~做成一个分页类!
2006/11/25 PHP
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
python禁用键鼠与提权代码实例
2019/08/16 Python
matplotlib.pyplot.matshow 矩阵可视化实例
2020/06/16 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
优秀教师获奖感言
2014/01/31 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
初中语文教学反思
2014/02/02 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
爬山的活动方案
2014/08/16 职场文书
五四演讲稿范文
2014/09/03 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
庆七一活动简报
2015/07/20 职场文书
详解Python常用的魔法方法
2021/06/03 Python
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS