Vue.jsとは

ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。

参考URL
https://jp.vuejs.org/v2/guide/index.html

Vue.jsを使用するメリット

気軽に使える：
Vue.js はjQueryと同様に、scriptタグを1行書くだけで使い始めることができます。
DOM操作を自動的に行ってくれる：
HTMLドキュメント全体の要素の構成をDOM(Document Object Model)といいます。Vue.jsはHTML側の要素とJavaScript側の値やイベントとの対応付を自動で行ってくれます。これにより、jQueryよりも簡潔に分かりやすくコードを記載することができます。
学習コストが低い：
AngularやReactと比較してフレームワークの規模が小さい分、覚えることも少なくて済みます。JavaScriptやjQueryの基礎知識があれば数時間の学習で開発を開始することができるでしょう。

Vue.jsで現在時刻を取得して表示する

初めに全体像を掴んでもらうために、完成品を記述します。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>{{ now }}</p>
    <button v-on:click="time">現在時刻</button> <!-- v-on:event -->
  </div>
  <!-- Vue.jsをインストール -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- ここから記述していきます -->
  <script>
    let app = new Vue({
      el: "#app",
      data:{
        now: "00:00:00"
      },
      methods: {
        time: function(e){ function(e) 
          var date = new Date();

          this.now = date.getHours() + ":"
          + date.getMinutes() + ":" +
          date.getSeconds();
        }
      }
    });
  </script>
</body>
</html>

完成品

ここから要素ごとに説明していきます。ちなみにVue.jsは始めたばかりになるので、説明が至らぬところがあればコメントお願いします。


  <div id="app">
    <p>{{ now }}</p>
    <button v-on:click="time">現在時刻</button> <!-- v-on:event -->
  </div>

まずはHTMLでのこちら。

{{ }}
こちらの記述がJavaScriptのメッセージに自動的に置換してくれます。
v-on
v-on ディレクティブを使うことで、DOM イベントの購読、イベント発火時の JavaScript の実行が可能になります。

参考URL
https://jp.vuejs.org/v2/guide/events.html#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%81%AE%E8%B3%BC%E8%AA%AD

次にコメントアウトにてscript以降の説明していきます。


let app = new Vue({
  el: "#app", //el: "ID要素"を取得します
  data:{
    //こちらのプロパティでHTMLの{{}}を置換します
  },
})

次にmethod以降の説明していきます。

let app = new Vue({
  el: "#app",
   data:{
     now: "00:00:00" //now: == {{}}
   },

   methods: {
     time: function(e){  //function(e) この引数eは、eventの「e」
       let date = new Date();  //new演算子でオブジェクトのインスタンスを生成
        //現在時刻の取得 **ここからはjavascript**
         this.now = date.getHours() + ":"
         + date.getMinutes() + ":" +
         date.getSeconds();
     }
   }
});

###ボタンを押す前

どうでしょうか？
クリックイベントで、現在の時間を取得できましたか？

私もまだまだ勉強中ですが、書き方自体はシンプルでとてもわかりやすいですよね。

ちなみに私はこちらをYoutubeで見て学習をしました。
是非そちらもご参考までに見てみてください。

Youtube たにぐちまことのともすたチャンネル様
https://www.youtube.com/watch?v=jdcZ3LvTs78