ボタンイベント

ボタンを押したら何かが起きる・・・フロントエンドでは確実に使う機能です。 Vue.jsでは、クリックイベントを拾って処理するのに「v-on:click」という指定を使います。実際のコードを見ていきましょう

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <title>クリックイベント</title>
</head>

<body>
    <div id="app">
        <h1>{{ msg1 }}</h1>
        <p>ようこそ{{ msg2 }}の世界へ。</p>
        <button name="clickBtn" v-on:click="msg1='はい！文字列が変化しました！！'; msg2 = 'clickイベント'">ここをクリックしてみて☆</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="./js/clickEvent.js"></script>
</body>

</html>

buttonタグが増えていますね。このタグにv-on:clickを指定し、その中でjsの処理を記述しています。この場合、ボタンをクリックしたらmsg1とmsg2の値を書き換える処理が発動します。処理の書き方については、従来のJavaScriptと同じですね。 ※「sample1.js」の読み込み部分が「clickEvent.js」に変わっていますが、名前が変わっただけです。

では、ボタンをクリックしてどう変化するのか見てみましょう。

押す前

押した後

はい！ボタンをクリックしたら、設定した文字列に変化しました！成功です！

処理をメソッドとして用意しよう

この書き方だと

一文が長くなる
複雑な処理を書きにくい
可読性が落ちる

など、実務で書く場合は望ましい書き方ではありません、なので、メソッド化してしまいます。

sample1.jsをリネームしたclickEvent.jsの中身をこんな感じに書き換えます。

var app = new Vue({
    el: '#app',
    data: {
        msg1: 'Hello!Vuejs!!World',
        msg2: 'Vue.js'
    },
    methods: {
      changeMsg: function(){
        this.msg1 = 'はい！文字列が変化しました！！';
        this.msg2 = 'clickイベント'
      }
    }
});

methodsというオプション指定が増え、その中に「changeMsg」というメソッドを追記しています。 ※メソッドを指定するオプション名は「methods」。複数形になっていることに注意。sを付け忘れる事故は多いです。

あれ？thisがついている？

お気づきでしょうか？メソッド化した時のmsgの指定が、html側での指定とちょっと違うことに。 dataオプションに指定したプロパティにmethodsオプションで設定した関数からアクセスする場合は先頭にthisをつける必要があるんです。

html側を修正しよう

では、「changeMsg」をhtml側で呼び出すよう、書き換えましょう

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8" />
    <title>クリックイベント</title>
</head>

<body>
    <div id="app">
        <h1>{{ msg1 }}</h1>
        <p>ようこそ{{ msg2 }}の世界へ。</p>
        <button name="clickBtn" v-on:click="changeMsg">ここをクリックしてみて☆</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="./js/clickEvent.js"></script>
</body>

</html>

とってもスッキリしましたね！動かすと、さっきと同じ結果になります。

余談

v-on:click属性はよく使うので、省略形として「@click」が用意されています。「v-on:click」と書くのが面倒な方はこちらをご利用くださいませ

<button name="clickBtn" @click="changeMsg">ここをクリックしてみて☆</button>

次回はv-modelのお話を書いていきます。ではまた。

ケリーの姉の技術ブログ

ケリーの姉が仕事で学んだ技術に関するアウトプットを行うブログです。たまにゲームの作成秘話なんかも

Vue.jsの入門書を読み始めた話　その２

ボタンイベント

処理をメソッドとして用意しよう

あれ？thisがついている？

html側を修正しよう

余談