详解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消息提示框插件Tipso
May 04 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
浅谈Vue.js
Mar 02 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
vue实现分页的三种效果
Jun 23 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
深入PHP数据加密详解
2013/06/18 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
调试php程序的简单步骤
2019/10/04 PHP
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
python基于物品协同过滤算法实现代码
2018/05/31 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
Python版中国省市经纬度
2020/02/11 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
keras导入weights方式
2020/06/12 Python
python跨文件使用全局变量的实现
2020/11/17 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
钢琴师观后感
2015/06/12 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers