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. （一）Audio子系统之AudioRecord.getMinBufferSize

    在文章<基于Allwinner的Audio子系统分析(Android-5.1)>中已经介绍了Audio的系统架构以及应用层调用的流程,接下来,继续分析AudioRecorder方法中的ge ...

  2. 通过js获取内网ip和外网ip的简单方法 ...

    今天遇到了一个需求,需要获取用户当前的内网ip, 找了半天终于找到了方法,遂将找到的方法记录下来,留给需要的人. 1,获取内网ip function getIP(callback) { let rec ...

  3. Mac下使用Wine安装Notepad++

    下载: (链接: https://pan.baidu.com/s/1miOjLXY 密码: 2egg) 安装: 1.安装Wine 参考:http://www.cnblogs.com/EasonJim/ ...

  4. 029-FastDFSClient工具栏模板

    模板一: package cn.e3mall.common.utils; import org.csource.common.NameValuePair; import org.csource.fas ...

  5. JavaScript设计模式-11.桥梁模式

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

  6. Can't find the 'libpq-fe.h header when trying to install pg gem

    https://stackoverflow.com/questions/6040583/cant-find-the-libpq-fe-h-header-when-trying-to-install-p ...

  7. js--常量，变量

    常量 内存中的一个的固定的地址,其中的数值也是固定的 变量 内存的一个地址,其中的内容有我们更改维护 值类型与引用类型 改变值类型的变量时,影响值的变量 全大写的名称一般为常量 var a = 1 v ...

  8. Jetty 的工作原理

    创建一个ServletContextServer类,用来初始化web应用程序的Context,并且指定Servlet和Servlet匹配的url.这里指定了两个Servlet,分别是HelloServ ...

  9. 使用Jasperreporter生成入库出库单打印等报表操作

    项目需要打印报表:就是那种生成入库单,出库单等的操作.使用到的技术:使用iReport Designer5.1.0设计报表,使用struts2+jasperreporter生成最终填充数据的报表 首先 ...

  10. SQL语句实现不存在即插入，存在则increase某字段的功能insert into … on duplicate key update

    前提条件:必须是唯一主键: CREATE UNIQUE INDEX idx_vote_object ON test_customers_vote (`vote_object`, `vote_objec ...