Vue指令和事件

/**

* 语法糖的概念：

* 语法糖是指在不影响功能的情况下，添加某种方法实现同样的；

* 使用语法糖,可以简化代码的书写

* 比如 v-on:click='func' @click='func'

* v-bind:src :src

*/

 

<!--

v-on 可以监听原生DOM事件click,dbclick,keyup,mousemove等。

表达式可以是方法名称，也可以是内联语句

如果不需要传递参数，()可以不写 @click= "handler"

默认会将event参数传入

// 自己配置具体按键

Vue.config.keyCodes.f1 = 111;

全局定义后，可以使用@keyup.f1

// 快捷键的名称,一下是全部的名称

.enter

.tab

.enter

.tab

.delete (捕获 “删除” 和 “退格” 键)

.esc

.space

.up

.down

.left

.right

这些按键修饰符也可以组合使用，或和鼠标一起配置使用

.ctrl

.alt

.shift

.meta (Mac 下是Command键盘，Windows下是窗口键)

-->

< div >

< span v-if=" show" >{{ msg}} </ span >

< button @click=" change123" >123123 </ button >

</ div >

<!--

Vue 提供了$event 用于访问原生DOM事件

-->

< a href= "http://www.baidu.com" @click=" openUrl( '链接', $event)" >链接 </ a >

<!--

修饰符

-->

< button v-on:click.stop=" handler" >阻止单击事件冒泡 </ button >

< form v-on:submit.prevent=" handler" >提交事件不再重载页面 </ form >

< button v-on:click.stop.prevent=" handler" >修饰符可以串联 </ button >

< form v-on:submit. prevent >只有修饰符号 </ form >

< button v-on:click.once=" handler" >once 只会触发一次，包括组件 </ button >

< button v-on:click.self=" handler" >只当事件在该元素本身（而不是子元素） </ button >

< div @click.capture=" handler" >添加事件侦听器时使用 事件捕获模式 </ div >

<!--

表单元素监听键盘事件

-->

< input type= "text" @keyup.13=" handler" >

< button type= "text" @click.ctrl=" handler" >ctrl+左键 </ button >

转载于:https://www.cnblogs.com/niusan/p/10389081.html