对Vue.js之事件的绑定(v-on: 或者 @ )详解


Posted in Javascript onSeptember 15, 2018

1、Vue.js事件绑定的一般格式

v-on:click='function'

v-on:click/mouseout/mouseover/

@click

2、Vue.js事件绑定的实现

2.1 JavaScript代码

<script type="text/javascript" src="../js/vue-1.0.21.js"></script>
 
		<script type="text/javascript">
			window.onload = function() {
				vm = new Vue({
					el: '#app',
					data: {
						arrMsg: ['apple', 'orage', 'pear']
					},
					methods: {
						show: function() {
							alert(this.arrMsg);
						}
					}
 
				});
			}
		</script>

2.2 html代码

<div id="app" class="container">
 <hr /> 事件的绑定方式一,v-on指令 
  <button type="button" v-on:click='show' class="btn btn-primary btn-default">显示数据</button>
 <hr/>事件的绑定方式二,简写方式 
  <button type="button" @click="show" class="btn btn-success btn-default">显示数据</button>
 </div>

2.3 运行结果

对Vue.js之事件的绑定(v-on: 或者 @ )详解

3、完整代码

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" rel="external nofollow" />
		<script type="text/javascript" src="../js/vue-1.0.21.js"></script>
 
		<script type="text/javascript">
			window.onload = function() {
				vm = new Vue({
					el: '#app',
					data: {
						arrMsg: ['apple', 'orage', 'pear']
					},
					methods: {
						show: function() {
							//使用this访问数据
							alert(this.arrMsg);
						}
					}
 
				});
			}
		</script>
	</head>
 
	<body>
		<!--形式-->
		<!--v-on:click="函数"
		v-on:click/mouseout/mouseover/dbclick-->
 
		<div id="app" class="container">
			<hr /> 事件的绑定方式一,v-on指令(要加一个:) 
			<button type="button" v-on:click='show' class="btn btn-primary btn-default">显示数据</button>
			<hr/>事件的绑定方式二,简写方式(@) 
			<button type="button" @click="show" class="btn btn-success btn-default">显示数据</button>
		</div>
 
	</body>
 
</html>

以上这篇对Vue.js之事件的绑定(v-on: 或者 @ )详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
js实现加载更多功能实例
Oct 27 Javascript
Node.js  REPL (交互式解释器)实例详解
Aug 06 Javascript
react-native android状态栏的实现
Jun 15 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 #Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 #Javascript
微信小程序动态增加按钮组件
Sep 14 #Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 #Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 #Javascript
Javascript 之封装(Package)
Sep 14 #Javascript
微信小程序框架wepy之动态控制类名
Sep 14 #Javascript
You might like
一个简单的PHP投票程序源码
2007/03/11 PHP
php相当简单的分页类
2008/10/02 PHP
php下保存远程图片到本地的办法
2010/08/08 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
Javascript 获取LI里的内容
2008/12/17 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
Node.js实现文件上传
2016/07/05 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
Python实现的rsa加密算法详解
2018/01/24 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
详解rem 适配布局
2018/10/31 HTML / CSS
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
如何删除一个表里面的重复行
2013/07/13 面试题
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
党校培训思想汇报
2014/01/03 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
岗位竞聘报告范文
2014/11/06 职场文书
雷峰塔导游词
2015/02/09 职场文书
个人维稳承诺书
2015/05/04 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis