对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实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
微信小程序 navbar实例详解
May 11 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 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实现ODBC数据分页显示一例
2006/10/09 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
php截取中文字符串函数实例
2015/02/23 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
Python numpy数组转置与轴变换
2019/11/15 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
项目合作计划书
2014/01/09 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书