小皇受独自学习Vue的第二天

经过学习Vue的基本框架，即关键参数和绑定关系，对Vue.js有了初步的了解，现在就快速进入进行的自学中吧，

Vue事件处理

在Vue中，我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件
v-on:click=“methodName” 或者快捷方式 @click=“methodName” 进行监听鼠标的单击事件

鼠标事件

本次主要介绍的鼠标事件中主要有三个：

v-on:click="单击事件" / v-on:dblclick="双击事件" / v-on:mousemove="鼠标移动"

单击

单击就很好理解了，但鼠标单击左键时触发一次事件包括按下和抬起两个动作，单击动作完成后，如果只是 按下却不抬起或隔一会抬起 这是鼠标单击长按事件，与单击事件是有所区别的，代码如下

<div id="vue-app">
	<h1>鼠标事件</h1>
	<p>我的年龄是：{{age}}</p>
	<button v-on:click="add">加一岁</button>
	<!-- <button @click="add">加一岁</button> -->
	<!-- 点击事件与某个方法做绑定 -->
	<button v-on:click="subtract">减一岁</button>
  </div>
  <!-- 为了方便将Vue写在HTML中，更好理解 -->
  <script>
	new Vue({
	  el: "#vue-app",
	  data: {
		age: 30,
	  },
	  methods: {
		add: function () {
		  this.age++;
		},
		subtract: function () {
		  this.age--;
		},
	  },
	});
  </script>

通过 add 和 subtract 方法控制单击事件后 age 参数的变化
其中 v-no：可直接替换成 @ 也是一样的

双击

若需要实验，点击按钮可加十岁，而不是加一岁的话呢？这时可以继续添加方法计算加十岁，也可以通过穿参数的方式进行加十岁，如

<div id="vue-app">
	<h1>鼠标事件</h1>
	<p>我的年龄是：{{age}}</p>
	<button v-on:click="add(1)">加一岁</button>
	<!-- <button @click="add">加一岁</button> -->
	<!-- 点击事件与某个方法做绑定 -->
	<button v-on:click="subtract(1)">减一岁</button>
	<button v-on:dblclick="add(10)">加十岁</button>
	<button @dblclick="subtract(10)">加十岁</button>
  </div>
  <!-- 为了方便将Vue写在HTML中，更好理解 -->
  <script>
	new Vue({
	  el: "#vue-app",
	  data: {
		age: 30,
	  },
	  methods: {
		add: function (inc) {
		  this.age += inc;
		},
		subtract: function (dec) {
		  this.age -= dec;
		},
	  },
	});
  </script>

通过传入 10 让 age 参数在原来的基础上加上 10 这个参数，已达到加十岁的目的，这里次啊用 v-on:dblclick 双击时间来完成，说明这个按钮需要连续点击两次才能触发这个方法

鼠标移动

实际上在console.log中event事件就有很多的属性，我们可以使用event.offsetX和event.offsetY来显示鼠标的X和Y的坐标，如

<div id="vue-app" v-on:mousemove="updateXY">
	<h1>Event</h1>
	<button v-on:click="add(1)">加一岁</button>
	<button v-on:click="subtract(1)">减一岁</button>
	<button v-on:dblclick="add(10)">加十岁</button>
	<button v-on:dblclick="subtract(10)">减十岁</button>
	<button v-on:dblclick="subtract(2)">减两岁</button>
	<p>My age is {{age}}</p>
	
	<div>{{x}},{{y}}</div>
  </div>

  <!--src="app.js"-->
  <script>
	new Vue({
	  el: "#vue-app",
	  data: {
		age: 30,
		x: 0,
		y: 0,
	  },
	  methods: {
		add: function (inc) {
		  this.age += inc;
		},
		subtract: function (dec) {
		  this.age -= dec;
		},
		updateXY: function (event) {
		  //   console.log(event);
		  this.x = event.offsetX;
		  this.y = event.offsetY;
		},
	  },
	});
  </script>

当鼠标在 v-on:mousemove 绑定的元素内移动时，则X和Y会随之改变