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"