Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part2〜

※この内容は Vue.js入門の〜基礎から実践アプリケーション開発まで を勉強したときの自己流理解メモです。


【これまでの記事】
1. <a href="https://qiita.com/sakiyama0101/items/dfc2a20e2dac2fee2850">Vue.js入門〜Vue.jsのはじめの一歩〜を5分で飛ばし読みする</a>
2. <a href="https://qiita.com/sakiyama0101/items/f80f3ed2405788cca0f9">Vue.js〜導入、基本の言葉の定義、考え方〜</a>
3. <a href="https://qiita.com/sakiyama0101/items/26290cf1d181f9382761">Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part1〜</a>


この記事の内容は、<a href="https://qiita.com/sakiyama0101/items/26290cf1d181f9382761">Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part1〜</a>の続編ですが、一話完結しているので特に読む必要はありません。


## データバインディング

自分で書いた記事 : <a src="https://qiita.com/sakiyama0101/items/dfc2a20e2dac2fee2850">Vue.js入門〜Vue.jsのはじめの一歩〜を5分で飛ばし読みする</a> の中でVue.jsの中で以下のような文章の箇所があります。
>状態の変更をVue.jsが検知（監視）して、自動的にviewに反映する。これを可能にしているプロパティこそ算出プロパティです。

この部分、`状態の変更をVue.jsが検知（監視）して、自動的にviewに反映する`に関して、この部分がリアクティブを表しているのだとなんとなくイメージしていましたが、それもそうだけれどもっと違う視点でもVue.jsはリアクティブという要素がありそうでした。

それが、P43の テンプレード構文の導入 に説明されています。
`テンプレートでは、Vueインスタンスのデータとビュー（DOMツリー）の関係を宣言的に定義する。`これは、データが決まればViewが変わるに対応してる。
この仕組みが、データバインディング 
>データバインディング（データバインド、あるいはData Bindingの訳からデータ結合とも呼ばれる。） とは、XMLなどのデータソースとアプリケーションやウェブページ（ウェブアプリケーション）のユーザインタフェースを静的または動的に結合する技術である。

### データバインディング〜テキスト展開〜

DOMへのマウント方法の基本の書き方は、{{ プロパティ }} のように、{{}}中括弧を二重にして書くのが基本的な展開方法。
{{ message }} のようにデータをバインディングすることで、`massage`プロパティが変更するたびに、それに応じて更新される。

```index.vue
<div id="app-1">
  <p> 朝の挨拶 : {{ message }} </p>
</div>

<script>
var app1 = new Vue({
  el: "#app-1",
  data: {
    message: 'Hello'
  }
})
</script>
```

上記のような典型的なものは簡単に感じたけれど、実際の業務の中では以下のようなデータの持たせ方をしたい時がありました。

```index.vue
<div id="app-2">
  <p> 朝の挨拶 : {{ message }} </p>
</div>


<script>
var app2 = new Vue({
  el: "#app-2",
  data: {
    message: '<span style="color: red;">Hello</span>'
  }
})
</script>
```

データに対して`スタイルを当てたり、classを当てたいという欲求`があったので上記のように書いてみましたが、実行結果はというと、
<img width="407" alt="output_04_01.png" src="https://qiita-image-store.s3.amazonaws.com/0/119773/282532e7-2d64-b45f-3fa0-5926e7b14233.png">

messageプロパティに入れられるのは、テキストだけなので、HTMLを入れることができない。じゃあどのようにclassを適用すれば良いのか?
こういう時使えるのが、生のHTMLというもの。
dataの中に、HTMLをいれるためには`v-html`というディレクティブを使用する。

```index.vue
<div id="app-2">
  <p> 朝の挨拶 : {{ message }} </p>
  <p style="display: inline-block;">朝の挨拶 : </p><span v-html="realHtml"></span>
</div>


<script>
var app2 = new Vue({
  el: "#app-2",//辞書型意識と、idは#つける。
  data: {
    message: '<span style="color: red;">Hello</span>',
    realHtml: '<span style="color: red;">Hello</span>'
  }
})
</script>
```

v-htmlを使うと
<img width="410" alt="v-htmlディレクティブを使用する" src="https://qiita-image-store.s3.amazonaws.com/0/119773/1cf92513-768e-6c32-c5c0-f66400d97d13.png">
（上）messageプロパティのDOMへのマウント方法に間違いがある実行結果
（下）v-htmlを私用してmessageプロパティをDOMヘマウント実行結果

messageプロパティにv-htmlディレクティブを使って生のHTMLをdataに持たせ、DOMに適用することができた。
v-htmlという、Vue.jsのディレクティブ機能を理解できた。
今後は、いくつかのディレクティブをシチュエーションと合わせて考え、試していきます。


続きは、次の記事で（v-if ディレクティブが長くなりそうなので、記事わけます）

〜次の記事はたぶんこんな内容〜
*Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part3〜*
・v-if ディレクティブ
・v-show ディレクティブ
・v-bind ディレクティブ

おわり


これまでの記事

1. <a href="https://qiita.com/sakiyama0101/items/dfc2a20e2dac2fee2850">Vue.js入門〜Vue.jsのはじめの一歩〜を5分で飛ばし読みする</a>
2. <a href="https://qiita.com/sakiyama0101/items/f80f3ed2405788cca0f9">Vue.js〜導入、基本の言葉の定義、考え方〜</a>
3. <a href="https://qiita.com/sakiyama0101/items/26290cf1d181f9382761">Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part1〜</a>