はじめに

Vue.jsに少し触れてみたので、その内容を「Vue.js入門」として、数回にわけて書いていこうと思います。

Vue.jsはユーザーインターフェイスを構築するためのプログレッシブフレームワークとのことです。

※ここではVue.jsの2.x系（2.6.14）を使用しています。3.x系では書き方が異なるので注意してください。

1. Vue.jsでHello World

1.1. ディレクトリの作成

ルートディレクトリ配下にjsディレクトリとindex.htmlファイルを作成します。
jsディレクトリ配下にmain.jsファイルを作成します。

C:\Data\git\practice_vue.js\lesson\lesson1>tree /F
フォルダー パスの一覧:  ボリューム Windows
ボリューム シリアル番号は F039-627E です
C:.
│  index.html
│
└─js
        main.js


C:\Data\git\practice_vue.js\lesson\lesson1>

1.2. HTMLの作成

index.htmlに以下を記載します。

index.html

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8">
    <title>Vue.jsでHello World!</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>  <!-- （１） -->
  </head>
  <body>
    <div id="app">  <!-- （２） -->
      <p>{{ message }}</p>  <!-- （３） -->
    </div>
    <script src="js/main.js"></script>  <!-- （４） -->
  </body>
</html>

（１）の部分はVue.jsのを読み込んでいます。

（２）の部分でidを指定します。このidの名称（ここではapp）で、後で作成するVueのインスタンスとを紐付けます。

（４）の部分はVue.jsで記述された'main.js'ファイルを読み込んでいます。

（３）の部分は（４）で読み込んでいる'main.js'の中で定義されたmessageという名前のデータを表示しています。

1.3. jsの作成

jsディレクトリ配下のmain.jsに以下を記載します。

js/main.js

var vm = new Vue({  // （１）
  el: '#app',       // （２）
  data: {
    message: 'Hello World!'  // （３）
  }
});

（１）でVueコンストラクタからインスタンスを作成しています。

（２）elに'#app'を設定し、index.htmlのid="app"の部分と紐付けます。

（３）dataのmessageに'Hello World!'を設定ます。

1.4. 動作確認

ブラウザでindex.htmlを開くと以下のようにHello World!が表示されます。

2. 双方向データバインディング

2-1. index.htmlを修正

index.htmlの<div id="app">の中に<input type="text" v-model="message">を追加します。
以下のindex.htmlの（１）の部分。

index.html

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="utf-8">
    <title>Vue.jsでHello World!</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="message">  <!--（１） -->
      <p>{{ message }}</p>
    </div>
    <script src="js/main.js"></script>
  </body>
</html>

（１）のv-modelはVueインスタンスのデータと、フォーム部品の値を関係づけます。
ここではVueインスタンスのデータmessageをフォーム部品inputに値を関係づけます。
これを「双方向データバインディング」といいます。

2.2. 動作確認