对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 相关文章推荐
DOM 基本方法
Jul 18 Javascript
javascript下判断一个元素是否存在的代码
Mar 05 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
Jul 09 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
js实现上传图片预览方法
Oct 25 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
使用nodejs下载风景壁纸
2017/02/05 NodeJs
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
python元组的概念知识点
2019/11/19 Python
python如何实现DES加密
2020/09/21 Python
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
请介绍一下Ant
2016/07/22 面试题
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
网络工程师个人的自我评价范文
2013/10/01 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
公司聚餐通知
2015/04/22 职场文书
最感人的道歉情书
2015/05/12 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python