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>