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. python全栈开发_day14_常见语法糖，递归和匿名函数

    一:常见语法糖 1)三元函数(三目函数) a=1 if 3>2 else 2 print(a) #得到返回值:1 2)列表字典推导式 lis=[("a",1),(" ...

  2. Codeforces Round #555 (Div. 3) D. N Problems During K Days 【数学思维】

    一 题面 D. N Problems During K Days 二 分析 对于这题,刚开始我就是陷入了对公式的执着,企图用公式直接确定第一个数,然后试着去找序列.经过思考和手动模拟后发现是很难保证正 ...

  3. TP5 隐藏入口文件 index.php

    找到public下的.htaccess <IfModule mod_rewrite.c> Options +FollowSymlinks -Multiviews RewriteEngine ...

  4. Java代码度量分析工具：Designite简介

    前言 在Java面向对象课程的学习过程中,我们需要使用度量工具来分析自己程序的代码结构.此类的度量工具有许多,或以插件形式存在于各个IDE中,或以.jar包的形式供用户使用.在这里,笔者向大家简单的介 ...

  5. 思维题--code forces round# 551 div.2

    思维题--code forces round# 551 div.2 题目 D. Serval and Rooted Tree time limit per test 2 seconds memory ...

  6. 什么是WCF(转)

    什么是WCF(Windows Communication Foundation(WCF)) 大家可以百度一下了解什么是WCF.当然有些人看到密密麻麻的黑框白字就懒的读.即使读了 可能也没明白确切的含义 ...

  7. PHP操作sqlserver乱码解决

    将捕获的参数编码转换为GB2312即可 function ($string){ returen iconv("UFT-8","GB2312//IGNORE",$ ...

  8. hibernate的反向生成改懒加载的地方

    改变懒加载只需要把生成的文件中的获取类型改为eager fetch = FetchType.EAGER @ManyToOne(fetch = FetchType.EAGER)//把懒加载换成饿加载模式 ...

  9. UTF8最好不要带BOM，附许多经典评论

    UTF-8 不需要 BOM,尽管 Unicode 标准允许在 UTF-8 中使用 BOM.所以不含 BOM 的 UTF-8 才是标准形式,在 UTF-8 文件中放置 BOM 主要是微软的习惯(顺便提一 ...

  10. Java 中 String 的常用方法（二）

    本文介绍剩下的一些常用的 String 中的方法. 1.replace 方法 .replaceFirst 方法和 replaceAll 方法 replace(char oldChar, char ne ...