详解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 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
跟我学习javascript的循环
Nov 18 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
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 七大优势分析
2009/06/23 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
用Eclipse写python程序
2018/02/10 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Python对wav文件的重采样实例
2020/02/25 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
adidas澳大利亚官方网站:adidas Australia
2018/04/15 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
残疾人创业典型事迹
2014/02/01 职场文书
汽车广告策划方案
2014/05/31 职场文书
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
房产公证书格式
2015/01/26 职场文书
旅游项目合作意向书
2015/05/08 职场文书
重阳节活动主持词
2015/07/04 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
PyMongo 查询数据的实现
2021/06/28 Python