【前端学习日记】Vue中的鼠标事件和键盘事件

Vue提供了很好用的模板语法，包括插值语法 { { }} 和指令语法v-？。使用指令语法很容易就可以为文档对象添加事件。

比较常用到的事件就是鼠标事件了。当用户使用鼠标点击网页上的某个元素，或者使用键盘按下某个键，会执行对应的回调（callback），进而在短时间内产生动作。

比如给button标签添加一个click（点击）事件，使用插值语法的简写形式（省略事件绑定语法v-on:click）：@click=“showinformation”，即当鼠标点击时，执行showinformation这个函数。

接着在script结构的methods配置项中编写函数的执行步骤和逻辑，就完成了整个事件。

上述代码执行后，点击按钮，会在控制台输出事件实例和参数。

在鼠标事件中，常会用到一些修饰符，来起到对事件的限定作用，常用的如：prevent、stop、once。

prevent：阻止默认事件

如对一个超链接标签使用@click.prevent="showinfor"，点击超链接，在执行完事件回调后，超链接并不会发生跳转。这些功能真的很秒。比如阻止一些钓鱼链接之类的。

stop：阻止事件冒泡

先讨论一下事件冒泡和捕获这个概念。当元素嵌套的父元素和子元素上都有一个相同（名称和类型均相同）的事件，此时父元素只是