Vue.js 入門（第１回） - Vue.jsでHello World と双方向データバインディング（v-model） -

# はじめに
`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に以下を記載します。

```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: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!`が表示されます。
![1-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/9ea217b6-e58d-842c-09ec-0aabcbe670b1.png)

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

### 2-1. index.htmlを修正

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

```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. 動作確認

ブラウザで`index.html`を開くと以下のように`Hello World!`が表示されます。
![2-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/a6d76ec6-d0d1-cbc1-34ed-ec3c63b50070.png)

テキストボックスに何か入力すると、その内容が即時反映されます。
![2-2-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/292434/41595cf3-72b7-aed2-d47f-48e47c504d21.png)

# あとがき
次回は算出プロパティ（computed）と監視（watch）について書きたいと思います。

# 参考
+ [Vue.js](https://jp.vuejs.org/ "Vue.js")
+ [とほほのVue.js入門](https://www.tohoho-web.com/ex/vuejs.html "とほほのVue.js入門")

# リンク
+ [Vue.js 入門（第２回） - 算出プロパティ（computed）と監視（watch） -](https://qiita.com/yasushi-jp/items/5f4e6c6a5eb0284cab15 "Vue.js 入門（第２回） - 算出プロパティ（computed）と監視（watch） -")
+  [Vue.js 入門（第３回） - メソッド（methods） -](https://qiita.com/yasushi-jp/items/52f4b77f2ec2a8d9c15c "Vue.js 入門（第３回） - メソッド（methods） -")
+  [Vue.js 入門（第４回【最終回】） - ToDoリストを作ってみる -](https://qiita.com/yasushi-jp/items/4416390dde26153073bd "Vue.js 入門（第４回【最終回】） - ToDoリストを作ってみる -")