Vue起步之事件绑定

1.点击、双击、鼠标事件

html：我们可以通过v-on:和@两种方法绑定事件

如：

<button v-on:click="add(1)">加一岁</button>

<button @dblclick="add(10)">加两岁</button>

add为函数名如无参数可以不写小括号直接add:click

如：<button v-on:click="add">加一岁</button>

如果你不想写js函数也可以这样：<button v-on:click="age++">加一岁</button>

click单击事件，dblclick双击事件，mousemove移动事件，updateXY是检测鼠标在页面的位置

运行结果：

2.事件的修饰符：

Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

  <!-- 阻止单击事件继续传播 -->
  <a v-on:click.stop="doThis"></a>
  
  <!-- 提交事件不再重载页面 -->
  <form v-on:submit.prevent="onSubmit"></form>
  
  <!-- 修饰符可以串联 -->
  <a v-on:click.stop.prevent="doThat"></a>
  
  <!-- 只有修饰符 -->
  <form v-on:submit.prevent></form>
  
  <!-- 添加事件监听器时使用事件捕获模式 -->
  <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
  <div v-on:click.capture="doThis">...</div>
  
  <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  <!-- 即事件不是从内部元素触发的 -->
  <div v-on:click.self="doThat">...</div>
  
  实例：
  

实例；

v-on:mousemove.stop=""通过.stop完成原来的

stopMoving:function(event){

event.stopPropagation();

},

3.键盘事件：

<label>姓名：</label>

<input type="text" v-on:keyup="logName">

监听键盘事件

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<label>年龄：</label>

<input type="text" v-on:keyup.enter="logAge">

只有按下enter键时才触发事件：

<label>密码：</label>

<input type="text" v-on:keyup.alt.enter="logPwd">

只有按下alt和enter键才触发事件

Vue-动态绑定CSS:https://blog.csdn.net/qq_35723619/article/details/83816369