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. Vue项目开发目录结构

    最近做一些CI+Vue开发的简单项目,由于刚开始一直从事后端,对Vue了解不是很多,fork了团队的项目代码发现项目的文件夹很多,一时间有些懵,上网上参考了部分资料,博客园中的放晴的天空与狮子爱吃草两 ...

  2. CentOS7 安装 PostGIS方法（适合国内网络）

    安装Postgresql 9.4 yum install http://yum.postgresql.org/9.4/redhat/rhel-6-x86_64/pgdg-redhat94-9.4-1. ...

  3. Mac 10.12安装PDF浏览工具Foxit Reader

    说明:永久没费的跨平台PDF浏览工具. 下载: (链接: https://pan.baidu.com/s/1pLEAoXH密码: is5j)

  4. hibernate3.3.2搭建Junit日志环境

    搭建好log4j日志环境后,再来搭建Junit测试环境: 测试代码放在另外一个目录下,项目右键,new一个source folder,源代码目录,放我们的测试代码,名字test.src放源代码. 比较 ...

  5. 对于maven创建spark项目的pom.xml配置文件（图文详解）

    不多说,直接上干货! http://mvnrepository.com/ 这里,怎么创建,见 Spark编程环境搭建(基于Intellij IDEA的Ultimate版本)(包含Java和Scala版 ...

  6. select2 使用教程

    用了这么久的Select2插件,也该写篇文章总结总结.当初感觉Select2不是特别好用,但又找不到比它更好的下拉框插件. 在我的印象里Select2有2个版本,最新版本有一些新的特性,并且更新了一下 ...

  7. 介绍nodejs中的path模块的几个方法

    webpack中常用的: var path = require('path') 是nodejs中的path模块,介绍一下webpack中常用的几个path模块的方法: 应用node环境的时候,这个pa ...

  8. Windows和Ubuntu双系统时间相差8个小时的问题

    由于要学编程,在windows 10上安装了Ubuntu16.04双系统.但是却造成windows时间老是比实际时间慢八个小时,Ubuntu会与网络同步时间,但是在程序中调用主板时间时仍然是UTC时间 ...

  9. nodejs学习笔记一（ sublime、atom开发环境，http模块，fs模块的初识）

    http服务   let server = http.createServer(function(req,res){       });   监听: server.listen(8080);   re ...

  10. c#参数修饰符-ref

    ref 关键字通过引用传递参数. 方法定义和调用方法必须显式使用ref关键字: 调用方法时参数必须初始化: 参数中可以声明多个ref修饰的参数. 例: public void UseRef( ref ...