Vue入门教程--键值修饰符使用详解（article:11）

Vue.js 初步入门

---

日常上网会有这样的场景，当你登录一个网站的时候，可以点击网页上的登录按钮，或者也可以用手指点击回车键登录，js需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。vue提供了这样的事件绑定按键的功能。

按键修饰符：.enter .tab .delete .esc .space .up .down .left .right

使用详情

<input type="button" @click="fun1()" value="按钮" /><br/>
<input type="text" :value="msg" @keyup.enter="fun1()"/>

fun1(){
	this.msg = '点击了按钮'
}

这段代码中用一个文本框和一个按钮来触发一个换文本内容的事件，只要单击按钮，文本框里的字就会改成事件所触发而改成的字。
同样，运用键值修饰符，在input框的keyup事件上加上这一修饰符，就能在选中input框，并在里面单击回车键触发同样的事件。

vue初始自带了这些按键的名称，当然，我们也可以自定义按键。

Vue.config.keyCodes.f1 = 112

前面的f1是自定义的别名，后面的的112则是实际的keyCode。这样全局定义的修饰符用法和上面一致。
另外，Vue中还支持组合写法：

@keyup.alt.67=”function”                   Alt + C
@click.ctrl=”function”                     Ctrl + Click

Tip

在自己封装的组件或者是使用有些第三方的UI库时，会发现并不起效果，这时就需要用到.native修饰符。
@keyup.enter.native="function"

---