对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 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
在antd Form表单中select设置初始值操作
Nov 02 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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新手上路(六)
2006/10/09 PHP
ajax缓存问题解决途径
2006/12/06 PHP
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
php编写一个简单的路由类
2011/04/13 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
职专应届生求职信
2013/11/16 职场文书
公司活动邀请函
2014/01/24 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
大二自我鉴定
2014/01/31 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
遗嘱继承公证书
2014/04/09 职场文书
网络技术专业求职信
2014/05/02 职场文书
人事任命书怎么写
2014/06/05 职场文书
违反交通法规检讨书
2014/09/10 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
python实现A*寻路算法
2021/06/13 Python
Python requests用法和django后台处理详解
2022/03/19 Python
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python