vue学习三事件绑定v-on的使用

最新推荐文章于 2023-12-31 19:25:26 发布

liusongjing

最新推荐文章于 2023-12-31 19:25:26 发布

阅读量223

点赞数

分类专栏： vue前端框架 vue初学之路

本文链接：https://blog.csdn.net/meihuasheng/article/details/99168393

版权

vue前端框架同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

vue初学之路

18 篇文章 0 订阅

订阅专栏

v-on：我的理解是绑定事件监听器，比如鼠标点击事件绑定，然后就可以写函数去做一些交互了

如下：给点击事件click绑定，设置add有参方法后就可以让age在点击时自增一，再者就可以给双击事件dblclick绑定等等，所以v-on的作用就这样，v-on的缩写形式：效果一样

<a @click="add(1)">增加一岁</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<style type="text/css">
			#canvas{
				width: 600px;
				padding: 200px 20px;
				text-align: center;
				border: 1px solid #ccc;
			}
		</style>
	</head>
	<body>

		<div id="app">
			<h1>事件的知识</h1>
			<button v-on:click="add(1)">涨一岁</button>
			<button v-on:click="del(1)">减一岁</button>
			<br />
			<button v-on:dblclick="add(10)">涨十岁</button>
			<button v-on:dblclick="del(10)">减十岁</button>
			<p>my age is {{age}}</p>    <br />
			
			<div id="canvas" v-on:mousemove="updateXY">
				{{x}}  ,{{y}}
			</div>
		</div>
		
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					age:22,
					x:0,
					y:0
				},
				methods:{
					add: function(inc){
						this.age+=inc;
					},
					del: function(dlc){
						this.age-=dlc;
					},
					updateXY: function(event){
						//console.log(event);
						this.x=event.offsetX;
						this.y=event.offsetY;
					}
				}
			});
		</script>
		
	</body>
</html>