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. security和oauth2.0的整合

    security和oauth2.0的整合 之前已经介绍过security的相关的介绍,现在所需要做的就是security和oauth2.0的整合,在原有的基础上我们加上一些相关的代码;代码实现如下: ...

  2. Spark Launcher

  3. JavaScript数据结构-7.链表

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. docker最新版本如何自定义配置文件

    1 如果你想使用 /etc/default/docker文件配置你的docker 在 /etc/systemd/system/docker.service.d/docker.conf 添加下面---- ...

  5. Spring AMQP

    Spring AMQP 是基于 Spring 框架的AMQP消息解决方案,提供模板化的发送和接收消息的抽象层,提供基于消息驱动的 POJO的消息监听等,很大方便我们使用RabbitMQ程序的相关开发. ...

  6. 关于svn插件突然失效问题

    这个分享一下 安装  MyBatisGenerator 插件 之后,svn失效,删掉mybatis 后,svn就恢复正常...这怎么割 一翻折腾无效,后来发现  MyBatisGenerator  和 ...

  7. Data Warehouse Hardware - DW硬件需求计算

    1. Disk I/O, 硬盘IO速度 硬盘的IO速度一直都是数据库的瓶颈,所以有条件的情况下尽可能的使用高IO的磁盘. 可以使用微软的工具SQLIO测试磁盘的IOPS 2. CPU的主频, DW和传 ...

  8. emit 方法表翻译

      Name Description Add Adds two values and pushes the result onto the evaluation stack.添加两个值并将结果推送到评 ...

  9. layer子窗口与父窗口传值

    layer作为优秀的jquery框架,可以用作弹出组件.日历.分页等,而且实现简单,只有几十k的大小. 此处给出弹出窗口时子窗口与父窗口的传值.js和css这里不展示引入(以下给出目录结构的图片),仅 ...

  10. 01.CLR的执行模型

    在非托管的C/C++中,可以进行一些底层的操作     "公共语言运行时"(CLR)是一个可由多种编程语言使用的"运行时"          CLR的核心功能包 ...