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

Vue 框架-02-事件：点击, 双击事件,鼠标移上事件1.单击事件：v-on:click源码 app2.js ：//实例化 vue 对象new Vue({//注意代码格式//el：element 需要获取的元素，一定是 html 中的根容器元素el:"#vue-app",data:{name:"肖朋伟",age:18},//存储自己的方法...

肖朋伟

14798人浏览 · 2018-11-07 16:21:22

肖朋伟 · 2018-11-07 16:21:22 发布

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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^