【 Vue.js v-on編】逃げてたけどやってみたら簡単だった♯４　FIREへの旅路 ♯430

S.A.P.Studio

2022年6月9日 17:31

Vue.jsを学習の第四回です。

前回はこちら

私自身が、学びながら、書きますから、
初学者が疑問に思うことを、フォローできると思います。

共に、学びましょう！！

【 Vue.js 】

VueはJavaScriptのライブラリです。
jQueryなどと同じものです。JavaScriptを簡単に扱いやすくしたものという理解で良いでしょう。
何ができるのかを、具体的に見ていきます。

◆ できること　#４「v-on」◆

今回は、「v-on」というディレクティブです。

クリックした時に、何かをするというような指定が可能です。

今回の例では、クリックしたら、現在時刻を表示するというコードになります。

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>


</head>

<body>

  <div id="app"><!-- id名を "app" にする -->
    <p>{{ time }}</p><!-- ① マスタッシュを使って"time"を置き換える -->
    <button  v-on:click="now">時刻を表示</button><!-- ② v-onディレクティブを書く -->
  </div>


  <!-- VueのCDNを貼り付けて、Vueを使えるようにする -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>


  <!-- <script>タグで囲んでVueのコードを書く -->
  <script>
    var app = new Vue({
      el: "#app",     //elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
      data: {        //dataの中にVueで扱うデータを定義する 
        time: "00:00:00" // ③{{time}}の初期値を書く 
      },

      methods:{ // ④ メソッドを定義する
        now:function(){   // ⑤ v-on:click="now" の「操作内容」を書く
          var date = new Date();
          
          this.time = date.getHours() + ":" // ⑥ {{time}}に表示させる内容を書く
          + date.getMinutes() + ":"
          + date.getSeconds() ;
        }
      }
    });
  </script>
</body>

</html>

コードのコメントアウトの番号に沿って、解説します。

① マスタッシュを使って"time"を置き換える

  <div id="app"><!-- id名を "app" にする -->
    <p>{{ time }}</p><!-- ① マスタッシュを使って"time"を置き換える -->
    <button  v-on:click="now">時刻を表示</button><!-- ② v-onディレクティブを書く -->
  </div>

Vueでは、マスタッシュ{{　 }} で囲んだ要素を、置き換えることができましgた。
これは、第一回で解説しています。

今回の場合は、timeをVueで置き換えます。

② v-onディレクティブを書く

  <div id="app"><!-- id名を "app" にする -->
    <p>{{ time }}</p><!-- ① マスタッシュを使って"time"を置き換える -->
    <button  v-on:click="now">時刻を表示</button><!-- ② v-onディレクティブを書く -->
  </div>

ユーザーがクリックした時の、動きを指定するために、
v-onというディレクティブを使います。

<button  v-on:click="now">時刻を表示</button>

<button>タグに、v-on:click="now"と、書くことで、
"<button>タグをクリックした時に" というイベントに対する指定ができます。

このクリックイベントを"now"と命名しているという認識で良いでしょう。

この"now"を、後で定義していきます。

③{{ time }}の初期値を書く

<script>
    var app = new Vue({
      el: "#app",     //elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
      data: {        //dataの中にVueで扱うデータを定義する 
        time: "00:00:00" // ③{{ time }}の初期値を書く 
      },

マスタッシュのtimeの初期値を、00:00:00としています。

④ メソッドを定義する

<script>
    var app = new Vue({
      el: "#app",     //elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
      data: {        //dataの中にVueで扱うデータを定義する 
        time: "00:00:00" // ③{{time}}の初期値を書く 
      },

      methods:{ // ④ メソッドを定義する
        now:function(){   // ⑤ v-on:click="now" の「操作内容」を書く
          var date = new Date();
          
          this.time = date.getHours() + ":" // ⑥ {{time}}に表示させる内容を書く
          + date.getMinutes() + ":"
          + date.getSeconds() ;
        }
      }
    });
  </script>

メソッドとは、「操作」と理解しましょう。

Vueでは、dataと同じ階層で、methodsを管理します。

methods { }　の中で、指定した要素の「操作」を定義します。

⑤ v-on:click="now" の「操作内容」を書く

<script>
    var app = new Vue({
      el: "#app",     //elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
      data: {        //dataの中にVueで扱うデータを定義する 
        time: "00:00:00" // ③{{time}}の初期値を書く 
      },

      methods:{ // ④ メソッドを定義する
        now:function(){   // ⑤ v-on:click="now" の「操作内容」を書く
          var date = new Date();
          
          this.time = date.getHours() + ":" // ⑥ {{time}}に表示させる内容を書く
          + date.getMinutes() + ":"
          + date.getSeconds() ;
        }
      }
    });
  </script>

methods { }　の中で、「操作」を定義していきます。

now:function(e){ }

この　"now"　は、

 <button  v-on:click="now">時刻を表示</button>

この、v-on の "now"　です。

つまり、"now"　の操作内容を書いているということです。

nowの続いて書かれている、
functionは、処理内容をまとめたものになります。

⑥ {{ time }}に表示させる内容を書く

<script>
    var app = new Vue({
      el: "#app",     //elはelementの略 Vueの効果範囲を指定 #appの中だけ指定
      data: {        //dataの中にVueで扱うデータを定義する 
        time: "00:00:00" // ③{{time}}の初期値を書く 
      },

      methods:{ // ④ メソッドを定義する
        now:function(){   // ⑤ v-on:click="now" の「操作内容」を書く
          var date = new Date();
          
          this.time = date.getHours() + ":" // ⑥ {{time}}に表示させる内容を書く
          + date.getMinutes() + ":"
          + date.getSeconds() ;
        }
      }
    });
  </script>

now に対する操作内容を見ていきます。

now:function(){   // ⑤ v-on:click="now" の「操作内容」を書く
          var date = new Date();
          
          this.time = date.getHours() + ":" // ⑥ {{time}}に表示させる内容を書く
          + date.getMinutes() + ":"
          + date.getSeconds() ;
        }

function の中身が、処理内容です。
この中身は、JavaScriptのコードになります。

現在時刻を表示するプログラムです。

"this.time" のtimeは、{{ time }} のことです。

マスタッシュのtimeの内容を定義しています。

これらのコードによって、このような動きとなります。

< button>をクリックした時に( v-on:click="now" )
↓
"now" の操作( methods ) が発動
↓
"this.time" = 現在時刻が、
↓
{{ time }} 　に表示される

【 v-on 】

v-onディレクティブは、その後にイベント内容を書き、
そのイベントが実行されたときに、処理を加えるという制御ができます。

今回は、v-on:clickで、クリックした時の動きを制御しましたが、
クリック以外にも、イベントの指定が可能です。

また、v-on:clickは、
@clickと略して書くことができます。
今回のコードは、下記のように書いても、動きます。

  <div id="app"><!-- id名を "app" にする -->
    <p>{{ time }}</p><!-- ① マスタッシュを使って"time"を置き換える -->
    <button @click="now">時刻を表示</button><!-- ② v-onディレクティブを書く -->
  </div>

クリックイベント以外の一覧です。
コードを書き換えて試してみましょう。

@click　　クリック時
@focus　　フォーカス時
@blur　　フォーカスが外れた時
@changeinput　　変更時
@dblclick　　ダブルクリック時
@submit　　サブミット時
@keyup　　キーアップ時
@keydown　　キーダウン時
@mouseover　　カーソルを当てた時(hover)
@mouseout　　カーソルを外した時
@mouseenter　　カーソルを当てた時(子要素に反応させない)
@mouseleave　　カーソルを外した時(子要素に反応させない)
@mousedown　　マウスでクリックした時
@mouseup　　クリックしたマウスを上げた時
@mousemove　　マウス動かしてる時
@touchstart　　スマホとかでタッチした時
@touchmove　　タッチ状態から動かした時
@touchend　　指を離した時

この記事が気に入ったらサポートをしてみませんか？

【 Vue.js v-on編 】 逃げてたけどやってみたら簡単だった♯４ FIREへの旅路 ♯430