Vue 框架-02-事件：点击, 双击事件,鼠标移上事件

1.单击事件：v-on:click

源码 app2.js ：

//实例化 vue 对象

new Vue({

	//注意代码格式

	//el：element 需要获取的元素，一定是 html 中的根容器元素

	el:"#vue-app",

	data:{

		name:"肖朋伟",

		age:18

	},

	//存储自己的方法

	methods:{

		reduce: function(){

			this.age--;

		}

	}

});

源码 html ：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>事件</title>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<div id="vue-app">

			<!--name 具体的值是在 js 中定义的-->

			<h2>我今年 {{age}} 岁了！</h2>

			<br />

			方法一：直接在页面上进行自增<hr />

			<button v-on:click="age++">加一岁</button>

			<br /><br />

			方法二：在 js 中实现减一岁

			<br /><hr />

			<button v-on:click="reduce">减一岁</button>

		</div>

		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->

		<script type="text/javascript" src="js/app2.js" ></script>

	</body>

</html>

2.双击事件：v-on:dblclick

双击事件：只有双击的时候，在 js 中实现减一岁

<br /><hr />

<button v-on:dblclick="reduce">双击减一岁</button>

3.传递参数

app2.js：

//实例化 vue 对象

new Vue({

	//注意代码格式

	//el：element 需要获取的元素，一定是 html 中的根容器元素

	el:"#vue-app",

	data:{

		name:"肖朋伟",

		age:18

	},

	//存储自己的方法

	methods:{

		reduce: function(){

			this.age--;

		},

		reduce2: function(year){

			this.age = this.age-year;

		},

	}

});

html ：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>事件</title>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<div id="vue-app">

			<!--name 具体的值是在 js 中定义的-->

			<h2>我今年 {{age}} 岁了！</h2>

			<br />

			方法一：直接在页面上进行自增<hr />

			<button v-on:click="age++">加一岁</button>

			<br /><br />

			方法二：在 js 中实现减一岁

			<br /><hr />

			<button v-on:click="reduce">减一岁</button>

			<br /><br />

			双击事件：只有双击的时候，在 js 中实现减一岁

			<br /><hr />

			<button v-on:dblclick="reduce">双击减一岁</button>

			<button v-on:click="reduce2(10)">减10岁</button>

			<br />

		</div>

		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->

		<script type="text/javascript" src="js/app2.js" ></script>

	</body>

</html>

4.鼠标移上事件：显示鼠标位置

app2.js ：

//实例化 vue 对象

new Vue({

	//注意代码格式

	//el：element 需要获取的元素，一定是 html 中的根容器元素

	el:"#vue-app",

	data:{

		x:0,

		y:0,

	},

	//存储自己的方法

	methods:{

		showXY:function(event){

			this.x = event.offsetX;

			this.y = event.offsetY;

		}

	}

});

html :

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>事件</title>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<div id="vue-app">

			<br />

			鼠标移上事件

			<hr />

			<div id="canvas" v-on:mousemove="showXY" style="border: 1px solid #eeaaaa;height: 200px;width: 300px;text-align: center;">

				当前鼠标位置（相对该div左上角）：<br> x:{{x}},y:{{y}}

			</div>

		</div>

		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->

		<script type="text/javascript" src="js/app2.js" ></script>

	</body>

</html>

提示：

html 中的

v-on:

可以直接用一个 @ 代替，例如：

<button @click="reduce">减一岁</button>

Vue 框架-02-事件：点击, 双击事件,鼠标移上事件的更多相关文章

  1. Jquery做点击选中与鼠标移上特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. html的鼠标双击，单击,移上，离开，事件捕捉，JavaScript

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JS事件 鼠标移开事件（onmouseout）鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。

    鼠标移开事件(onmouseout) 鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序. 当把鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout ...

  4. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  5. zepto.js 的tap事件中点击一次触发两次事件

    html代码: <div class="xh-lxx-cart-count1"> <span class="minus">-</s ...

  6. jq点击和鼠标移上效果以及一个等号"=" 二个等号"==" 三个等号"===" 的区别

    <body> <div class="a" bs='1' style="width:100px; height:30px; border:1px sol ...

  7. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  8. JS添加/移除事件

    事件的传播方式 <div id="father"> <div id="son"></div> </div> &l ...

  9. JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;

    JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...

随机推荐

  1. scp 一次拷贝多个文件

    用正则表达式去匹配即可, scp  *.tar  root@11.11.11.12:/root/ 拷贝当前目录下的所有tar类型的文件到服务器上

  2. (转载)Android xml资源文件中@、@android:type、@*、？、@+引用写法含义以及区别

    原帖地址:http://blog.csdn.net/zfrong/article/details/7332545 Android xml资源文件中@.@android:type.@*.?.@+引用写法 ...

  3. mono for android读书笔记之硬件编程(转)

    本章将会介绍: 传感器的API 加速器编程,设备的方向,近场检测 网络编程 蓝牙编程 上述的技术的应用场景很多,比如: 1.检测当前的网络是否可用,并提醒用户,检测当前的网络类型,比如Wifi.3G. ...

  4. php-redis 模块 文档

    直接从这位朋友转载过来. 地址 Redis::__construct构造函数$redis = new Redis(); connect, open 链接redis服务参数host: string,服务 ...

  5. linux 打包 压缩 解压缩

    gzip gzip xxx文件 压缩文件xxx,后缀.gz 并且删除原来文件 gzip -tv xxx.gz 测试压缩文件压完整性 压缩当前文件夹所有文件: zip -r ./1.zip ./* -r ...

  6. 设置spacevim字体显示乱码问题

    https://github.com/powerline/fonts clone powerline fonts 仓库 执行项目中的 install.sh 安装字体 修改终端配置中使用的字体为 xxx ...

  7. call()和apply()方法（切换上下文）

    call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. apply方法: 语法:apply ...

  8. vue中过滤器比较两个数组取相同值

    在vue中需要比较两个数组取相同值 一个大数组一个 小数组,小数组是大数组的一部分取相同ID的不同name值 有两种写法,两个for循环和map写法 const toName = (ids, arr) ...

  9. GitHub和git和repo的使用

    1. GitHub的使用 https://github.com/maogefff/GitHub-git-repo 2. git的使用 https://github.com/maogefff/GitHu ...

  10. 使用Redis SETNX 命令实现分布式锁（转载）

    使用Redis的 SETNX 命令可以实现分布式锁,下文介绍其实现方法. SETNX命令简介 命令格式 SETNX key value 将 key 的值设为 value,当且仅当 key 不存在. 若 ...