zoukankan      html  css  js  c++  java
  • Vue 框架-02-事件:点击, 双击事件,鼠标移上事件

    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; 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>
    
  • 相关阅读:
    How To Build CyanogenMod Android for smartphone
    CentOS安装Code::Blocks
    How to Dual boot Multiple ROMs on Your Android SmartPhone (Upto Five Roms)?
    Audacious——Linux音乐播放器
    How to Dual Boot Multiple ROMs on Your Android Phone
    Everything You Need to Know About Rooting Your Android Phone
    How to Flash a ROM to Your Android Phone
    什么是NANDroid,如何加载NANDroid备份?
    Have you considered compiled a batman-adv.ko for android?
    BATMAN—Better Approach To Mobile Adhoc Networking (B.A.T.M.A.N.)
  • 原文地址:https://www.cnblogs.com/xpwi/p/9923290.html
Copyright © 2011-2022 走看看