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>
以上是 Vue指令和事件 的全部内容， 来源链接： utcz.com/z/378725.html
