Vue.jsでwindow.addEventLister???

ドットインストールのJavaScript講座で紹介されているタイピングゲームをVue.jsで実装しようとした時に1つ困ったことがありました。

window.addEventListner('keydown', (e) => {

  console.log(e.key);

}

この部分、Vue.jsではどうやって実装するんだ？？？ということです。

これはwindow全体でキーの入力を受け付ける状態になっているので、タイピングゲームがスタートするとそのままの状態でキーの入力や正誤判定ができるようになります。

ですが、Vue.jsの場合、基本的にHTMLの各要素にイベントを設定して、その要素に対して何かイベントが発生すると、その処理をVue.js側で行うという形になりますよね。

例えば、こんな感じです。

<body>
    <p id="app" v-on:click="func1">ppp</p>
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vue = new Vue({
            el:"#app",
            methods:{
                func1(){
                    console.log("clicked!");
                }
            }
        });
    </script>
</body>

p要素にclickイベントが発生した時にfunc1が呼ばれる。

みたいな。

今回は、window全体でキーの入力を受付けたいので、どこにもイベントは設定できないし。。。

って思ってたら、ありました、いい方法が。

このサイトで紹介れさていました。

Add Vue.js event on window

https://stackoverflow.com/questions/36993834/add-vue-js-event-on-window

createdでJavascriptと同じように window.addEventLister… を定義して、keydownが発生した時に実行するメソッドをmethodsのところで自分で定義するやり方です！

実際のソースコードは以下のようになります。

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var vm = new Vue({
            created:function(){
                window.addEventListener('keydown', this.inputKey);
            },
            methods:{
                inputKey(event){
                    console.log("inputKey!");
                    console.log(event.key);
                }
            }
        });
    </script>
</body>

このように書くことで、windowのどこに入力してもkeydownのイベントが発生してキーの入力を受け付けることができるようになります。

ちょっと大事なところを復習しておきますね。

まずは、createdのところです。

createdはインスタンスが生成された後に実行したいコードを書いておく場所です。

こういうのをフック関数なんて呼んだりします。

公式のマニュアルはこちら