对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 相关文章推荐
新鲜出炉的js tips提示效果
Apr 03 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
jQuery实现可拖动的浮动层完整代码
May 27 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
layui table单元格事件修改值的方法
Sep 24 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
React如何创建组件
Jun 27 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
计算2000年01月01日起到指定日的天数
2006/10/09 PHP
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
php GeoIP的使用教程
2011/03/09 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
php使用filter过滤器验证邮箱 ipv6地址 url验证
2013/12/25 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
jquery easyui使用心得
2014/07/07 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
JavaScript中如何调用Java方法
2020/09/16 Javascript
[05:06]DOTA2-DPC中国联赛 正赛 VG vs Magma选手采访
2021/03/11 DOTA
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
python爬取代理ip的示例
2020/12/18 Python
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
国旗下的演讲稿
2014/05/08 职场文书
学术诚信承诺书
2014/05/26 职场文书
业务内勤岗位职责
2015/04/13 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书