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

朴灿烈づ我的快乐病毒、 2022-04-18 02:58 360阅读 0赞

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

### 1.单击事件：v-on:click ###

![20181107153425544.gif][]

源码 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">
    			
    			
    			<h2>我今年 {
       {age}} 岁了！</h2>
    			<br />
    			方法一：直接在页面上进行自增<hr />
    			<button v-on:click="age++">加一岁</button>
    			<br /><br />
    			方法二：在 js 中实现减一岁
    			<br /><hr />
    			<button v-on:click="reduce">减一岁</button>
    			
    		</div>
    		
    		
    		<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">
    			
    			
    			<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>
    		
    		
    		<script type="text/javascript" src="js/app2.js" ></script>
    	</body>
    </html>

### 4.鼠标移上事件：显示鼠标位置 ###

![在这里插入图片描述][20181107161342143.gif]

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>
    		
    		
    		<script type="text/javascript" src="js/app2.js" ></script>
    	</body>
    </html>

### 提示： ###

html 中的

> v-on:

**可以直接用一个 @ 代替，例如：**

[20181107153425544.gif]: /images/20220418/b8a84f5366364b9e8f3a4d302df66a15.png
[20181107161342143.gif]: /images/20220418/110adffe45ac4ed6ac3fefe74e12a6e6.png