Vue提供了很好用的模板语法,包括插值语法 { { }} 和指令语法v-?。使用指令语法很容易就可以为文档对象添加事件。
比较常用到的事件就是鼠标事件了。当用户使用鼠标点击网页上的某个元素,或者使用键盘按下某个键,会执行对应的回调(callback),进而在短时间内产生动作。
比如给button标签添加一个click(点击)事件,使用插值语法的简写形式(省略事件绑定语法v-on:click):@click=“showinformation”,即当鼠标点击时,执行showinformation这个函数。
接着在script结构的methods配置项中编写函数的执行步骤和逻辑,就完成了整个事件。
上述代码执行后,点击按钮,会在控制台输出事件实例和参数。
在鼠标事件中,常会用到一些修饰符,来起到对事件的限定作用,常用的如:prevent、stop、once。
prevent:阻止默认事件
如对一个超链接标签使用@click.prevent="showinfor",点击超链接,在执行完事件回调后,超链接并不会发生跳转。这些功能真的很秒。比如阻止一些钓鱼链接之类的。
stop:阻止事件冒泡
先讨论一下事件冒泡和捕获这个概念。当元素嵌套的父元素和子元素上都有一个相同(名称和类型均相同)的事件