【Vue.js】キーコマンドを作成してヘルプウィンドウを出したい

Vue.jsを使えば簡単にキーコマンドを作ることができます。

以下は、textarea入力中に「ali + h」を押すとウィンドウアラートでメッセージが出現するという仕組み。

<div id="app">
    <form>
        <lavel for="message">メッセージ：（ヘルプは「alt + h」で！）</lavel>
        <textarea id="message" @keyup.alt.72="help" v-model="message"></textarea>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="template.js" charset="utf-8"></script>

var app = new Vue({
    el: '#app',
        data:{
            message:'',
        },
        methods: {
            help: function() {
            window.alert('20文字まで入力できます。');
        }
    }
});

以下の部分は、keyupイベントの際に「altとh(キーコード72)」を押すと、helpメソッドが呼び出されるという仕組み。

<textarea id="message" @keyup.alt.72="help" v-model="message"></textarea>

また、v-modelはinputやtextareaのvalueを意味するということも覚えておきたい。

v-modelとv-bindはよく似ているため、その違いについては以下の記事にかなりわかりやすい説明が記載されています。
【Vue】v-bind と v-model の違い - 山崎屋の技術メモ

この仕組みを使えば、オリジナルのキーコマンドを作ることが簡単にできます！

参考

速習Vue.js 速習シリーズ 山田祥寛