事件修饰符

事件处理中我们使用过​​event.preventDefault()​​方法或者​​event.stopPropagation()​​方法，在vue中我们可以在​​v-on​​指令中使用​​stop​​或者​​prevent​​去代替上面两个方法。除此之外还有​​capture​​表示添加事件监听器时去使用。​​self​​表示仅当事件是从特定按键触发时才触发回调。​​once​​表示仅仅触发一次回调，再次点击时也不会再触发。​​left​​表示当按鼠标左键时触发。​​right​​表示当按鼠标右键时触发。​​middle​​表示当按鼠标中间的键时触发。​​passive​​表示当为true模式添加侦听器。修饰符还可以串起来去使用，但是需要注意书写顺序。​​v-on:click.prevent.self​​表示会阻止所有的单击。​​v-on:click.self.prevent​​表示只会阻止对元素自身的单击。

<div v-on:click.self="btnClick"></div>
<div v-on:click.once="intClick"></div>

键盘修饰符

键盘修饰符有很多，例如​​enter​​、​​space​​、​​ctrl​​、​​alt​​、​​shift​​、​​meta​​等，需要注意的是mac系统和windows系统有些对应的键是不一样的。例如有​​meta​​。还有当修饰键和​​keyup​​事件一起使用时，事件触发修饰键必须处于按下状态。

<input @keyup.ctrl.a="btnClick">

上面表示只有当我们同时按下​​ctrl​​和​​a​​键的时候,​​btnClick​​方法不会被调用，但是当我们按住ctrl键，但是松开a键的时候，就会触发btnClick事件。如果我们想要同时按下时去触发btnClick事件，我们可以用ctrl对应的数字就替代这个键。

v-text/v-html

​​v-text​​指令用于更新元素的文本内容。​​v-html​​指令用于更新元素的​​innerHTML​​，相当于我们可以将内容当做html代码插入进去。但是我们需要注意的是，插入的html代码可以带来安全性问题，所以我们尽量不要在用户提交当面使用该指令。

v-once

​​v-once​​这个指令可以让元素或者组件只渲染一次，不需要使用表达式，当渲染过之后，再次渲染时，就会把渲染过的东西当做静态内容或者跳过。从而提高性能优化。

v-cloak

​​v-cloak​​主要用于当浏览器加载页面时，当我们的网速比较慢或者内容太多时。结合css中设置​​display​​为​​none​​。就会解决页面加载慢闪烁的问题。

自定义指令

自定义指令可以通过全局注册或者本地注册两种方法，只有注册后才能去使用。使用​​directive()​​方法注册全局自定义指令。接收两个参数分别为指令的名字和定义对象或者函数对象。

vm.directive(name, [define])