我们首先来理解一下什么是键盘事件
    之前@click是鼠标事件，键盘事件的一个形象表示：比如键盘输入enter之后，代表执行

    键盘事件我们使用keydown 和 keyup来表示，keydown代表当我们按下按键之后立即执行
    Keyup代表我们按下键盘之后松开手，键盘回弹之后再执行，所以我们更常常使用keyup

    keyup.enter代表我们输入了enter字符

    1. <body>
    2.         <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    3.         <!-- 准备好了容器 -->
    4.         <div id="app">
    5.             <input type="text" @keyup.enter="ack">
    6.         </div>
    8.         <script >
    9.             var vm = new Vue ({
    10.                 data : {
    11.                     money: 10000,
    12.                 },
    13.                 methods: {
    14.                     ack(){
    15.                         document.write("您成功输入了您的银行卡号")
    16.                     }
    17.                 }
    18.             });
    19.             vm.$mount("#app")
    20.         </script>    
    21.     </body>

    我们如何获取键盘事件，并拿到输入值呢？
    image.png

    第二种方式

    image.png

    终极版

    安装nanoid的库
    npm i nanoid
    image.png

    第三种方式：

    image.png

    兄弟组件如何传递数据？

    目前没有办法。。。我们可以把todos这个数据抽离出来
    抽离到哪？？？
    抽离到他俩到父 组件 App.Vue中

    所以App.vue增加数据 ，但是App中的组件要通过props引用这个数据