Vue.js

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全体でキーの入力を受付けたいので、どこにもイベントは設定できないし。。。

 

 

 

 

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

 

 

 

 

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

 

 

 

 

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はインスタンスが生成された後に実行したいコードを書いておく場所です。

 

 

 

 

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

 

 

 

 

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

 

 

 

 

 

 

あと、ライフサイクルについてはこの記事で詳しく解説されているので、読んでみることををオススメします!

 

 

 

 

 

 

次は、addEventListerのところですね。

 

 

 

addEventListerメソッドは以下のように書きます。

 

 

 

 

DOM要素.addEventLister(①イベントの種類、②イベントリスナー);

 

 

 

 

イベントの種類にはclickやloadやsubmit、今回のようにkeydownや他にもたくさんあります。

 

 

 

 

動きとしては、①のイベントが発生したら②のイベントリスナーが呼び出されるという動きになります。

 

 

 

 

今回のソースコード だと、

 

 

 

 

“keydown”イベントが発生したら、”this.inputKey”が呼び出される

 

 

 

 

という動きになりますね。で、その”inputKey”をメソッドで登録しておくと。

 

 

 

 

この記事が少しでも理解の役に立てば嬉しいです!😄

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です