【Vue.js】Vue.jsをつかむ①

私のアウトプットです。

Vue.jsも人気のフロントエンドフレームワークのはずですが
なぜかReact推しであるブログ記事やYouTubeが多いので
私自身、Vue.jsを学習する上で、理解しておきたいことをまとめました。

今回は、敢えてv2.6.11を前提に投稿いたします。

##コード全体

```html:index.html
<html>

<head>
  <title>Hello Vue</title>
　<!-- （1） CDNからのVueの読み込み -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
</head>

<body>
　<!-- （5） Vueインスタンスの有効範囲ここから -->
  <div id="app">
    <!-- （6） マスタッシュ構文 -->
    <p>Hello {{world}}</p>  
    <p>Counter: {{count}}</p>
    <!-- （7） v-ifディレクティブ -->
    <p v-if="count == 5">見えました！</p> 
     <!-- （8） v-modelディレクティブ -->
    <input v-model="world"><br>
    <input type="number" v-model="count" />
  </div>
  <script>
    // （2） Vueインスタンスの作成
    new Vue({
      el: "#app",  // （3） elプロパティ
      data() {     // （4） data()メソッド
        return {
          world: "Vue",
          count: 0
        }
      }
    })
  </script>
</body>

</html>

```

##Vue.jsの読み込み

```html:index.html
<!-- （1） CDNからのVueの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
```

（1）は、CDNで公開されているVue.jsを読み込んで実行する為のコードです。
プロトタイピングや学習を目的とする場合は、このCDNを使用するのが良さそうです。


##Vueインスタンスの有効範囲
``<body>``の中の``<script></script>``を見ます。

```html:index.html
  <script>
    // （2） Vueインスタンスの作成
    new Vue({
      el: "#app",  // （3） elプロパティ
      data() {     // （4） data()メソッド
        return {
          world: "Vue",
          count: 0
        }
      }
    })
  </script>
```

（2） は、``new Vue()``でVueインスタンスを作っています。
引数に渡しているオブジェクトがVueのコンポーネントになっています。
このオブジェクトを見ていくと、elプロパティ（3）と、data()メソッド（4）があります。
  
elプロパティはDOMに対して指定した値に該当するエレメントを見つけて
対象のエレメントが見つかった時にVue.jsのインスタンスとHTMLをマッピングするセレクタです。
  
data()メソッドはオブジェクトを返すメソッドとして定義しています。
このときのオブジェクトが持つプロパティ(（4）では、worldとcount)をVue.jsは監視し続けます。
この監視対象が変化したとき、必要に応じて画面への反映を即座に行ってくれます。

##DOM上での変数展開
``<body>``の中の``<div id="app"></div>``を見ます。

```html:index.html
　<!-- （5）Vueインスタンスの有効範囲ここから -->
  <div id="app">
    <!-- （6） マスタッシュ構文 -->
    <p>Hello {{world}}</p> 
    <p>Counter: {{count}}</p>
    <!-- （7） v-ifディレクティブ -->
    <p v-if="count == 5">見えました！</p> 
     <!-- （8） v-modelディレクティブ -->
    <input v-model="world"><br>
    <input type="number" v-model="count" />
  </div>
```

これがVueインスタンスが有効な範囲です。
この``id="app"``で先ほど作ったVueインスタンスとHTMLをマッピングしていきます。
Vueインスタンスのelプロパティ指定と併せて、
別のidを指定したり、classで指定することも可能です。  
  
``<p>Hello {{world}}</p>``（6）で使われている``{{}}``という構文は**マスタッシュ構文**と言います。
見た目が『口ひげ』に似ているからだそうです。
この中では``data()``の中のプロパティにアクセスができ、
``data()``の中にあるプロパティが変化すると、それに応じた結果が即座に反映されます。

##v-if

```html:index.html
<!-- （7） v-ifディレクティブ -->
<p v-if="count == 5">見えました！</p> 
```
``v-``で始まる属性をVue.jsでは**ディレクティブ**と言います。
この``v-if``は**条件付きレンダリング**と呼ばれるディレクティブで、
``v-if``の後に記述する条件に一致していればDOMにレンダリングされ、
不一致ならDOM上から消えるようになっています。
（言わば、『if文』ですね。）
今回の場合はcountプロパティの値が5の場合に
『見えました！』と表示されることになります。

##v-model
```html:index.html
<!-- （8） v-modelディレクティブ -->
<input v-model="world">
```

これは、**双方向バインディング**と言って、
``<input>``タグの様な入力を受け付けるタグに対して
``data()``プロパティを指定できます。
つまり、``<input v-model="world">``の場合は、
テキストボックスに値を入力すると
その値が``data()``の``world``に設定されることになります。
これにより、入力フォームの``input``イベントを監視して、
``data()``のプロパティへ随時反応されていくというコードになります。
なお、Vue.jsでは``v-model``によってフォームと対応付けられているプロパティが認識されている為
識別用のクラスや名前を付与しなくても値の読み取りが可能です。

##まとめ
###（1）CDNからのVueの読み込み
CDNで公開されているVue.jsを読み込んで実行する為のコードです。

###（2）Vueインスタンスの作成
``new Vue()``でVueインスタンスを作っています。

###（3）elプロパティ
DOMに対して指定した値に該当するエレメントを見つけて
対象のエレメントが見つかった時にVue.jsのインスタンスとHTMLをマッピングするセレクタです。

###（4）data()メソッド
オブジェクトを返すメソッドです。

###（5）Vueインスタンスの有効範囲
``id="app"``でVueインスタンスとHTMLをマッピングしていきます。

###（6）マスタッシュ構文
``<p>Hello {{world}}</p>``で使われている``{{}}``です。

###（7）v-ifディレクティブ
``v-if``の後に記述する条件に一致していればDOMにレンダリングされ、
不一致ならDOM上から消えるようになっています。

###（8）v-modelディレクティブ
``<input>``タグの様な入力を受け付けるタグに対して``data()``プロパティを指定できます。