はじめに
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に以下を記載します。
<!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に以下を記載します。
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の（１）の部分。
<!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. 動作確認
ブラウザでindex.htmlを開くと以下のようにHello World!が表示されます。
テキストボックスに何か入力すると、その内容が即時反映されます。
あとがき
次回は算出プロパティ（computed）と監視（watch）について書きたいと思います。