《Vue.js实战》数字输入框组件案例（包含练习1和练习2）

题目来源：《Vue.js实战》第七章 7.7.1 实战：开发一个数字输入框组件

展示效果链接：https://loaln.github.io/vue_practice/html/7-7-1.html

数字输入框组件展示效果

需求：

数字输入框只能输入数字，而且有两个快捷键按钮，可以直接减1或加1。除此之外，还可以设置初始值、最大值， 在数值改变时，触发一个自定义事件来通知父组件。

操作提示：

1、数值最小为0，最大为100；
2、输入框聚焦时，按键盘上下键可对数值进行+1和-1的操作；
3、额外设置的两个按钮可进行+10和-10的操作。

练习1：

在输入框聚焦时，增加对键盘上下键的支持，相当于加1和减1。

思路：

这里倒是很简单，直接在组件模板的input元素中绑定两个键盘事件连接 handleDown 和 handleUp 函数即可。
即：@keyup.down="handleDown(1)" @keyup.up="handleUp(1)"