VueJS事件处理器v-on的使用方法


Posted in Javascript onSeptember 27, 2017

本文介绍了VueJS事件处理器v-on的使用方法,分享给大家,具体如下:

事件监听可以使用 v-on 指令.

v-on:click表达式

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
 <button v-on:click="counter += 1">增加 1</button>
 <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

<script>
new Vue({
 el: '#app',
 data: {
  counter: 0
 }
})
</script>
</body>
</html>

每点一次按钮结果就增加1。

v-on:click调用方法

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <!-- `greet` 是在下面定义的方法名 -->
 <button v-on:click="greet">Greet</button>
</div>

<script>
var app = new Vue({
 el: '#app',
 data: {
  name: 'Vue.js'
 },
 // 在 `methods` 对象中定义方法
 methods: {
  greet: function (event) {
   // `this` 在方法里指当前 Vue 实例
   alert('Hello ' + this.name + '!')
   // `event` 是原生 DOM 事件
   if (event) {
     alert(event.target.tagName)
   }
  }
 }
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>
</body>
</html>

点击按钮调用greet方法。

v-on:click调用方法传递参数

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
 <button v-on:click="say('hi')">Say hi</button>
 <button v-on:click="say('what')">Say what</button>
</div>

<script>
new Vue({
 el: '#app',
 methods: {
  say: function (message) {
   alert(message)
  }
 }
})
</script>
</body>
</html>

点击按钮会提示相应的信息。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
js回到页面指定位置的三种方式
Dec 17 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 Javascript
javascript基本常用排序算法解析
Sep 27 #Javascript
Angularjs cookie 操作实例详解
Sep 27 #Javascript
js移动端图片压缩上传功能
Aug 18 #Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 #Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 #Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 #Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 #Javascript
You might like
香妃
2021/03/03 冲泡冲煮
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
JavaScript 一道字符串分解的题目
2011/08/03 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
用js实现放大镜效果
2020/10/28 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
[03:48]显微镜下的DOTA2第四期——TP动作
2014/06/20 DOTA
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python format 格式化输出方法
2018/07/16 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
俄罗斯美容和健康网上商店:Созвездие Красоты
2019/07/23 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
音乐器材管理制度
2014/01/31 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
汽车维修求职信
2014/06/15 职场文书
优秀教师申报材料
2014/12/16 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
JavaScript前端面试组合函数
2022/06/21 Javascript