Vue.jsの双方向バインディングを理解する

本記事の目的

・双方向バインディングに関してざっくり説明できるようになる。

・ディレクティブの理解を深める。

Udemyで勉強したことをまとめました。

双方向バインディングとは

外部(ブラウザ)からの入力と
内部(スクリプト)からの入力、どちらから行っても双方向で値の更新ができる仕組み。

「v-model」というディレクティブを利用して実現する。

双方向バインディングの何が便利なん？

コードが簡潔に出来る。双方向バインディングを使用しない場合、

画面で入力した内容の変更イベント(onChange)でイベントを受け取って、html上のDOM操作を使ってテキストボックスから値を取得し、変数に値を設定するry...。

みたいな事を実装しなければならない。

そもそもディレクティブって？

DOM要素に対して何かしらの操作を行うことができる。

接頭辞に「v-」が付く。

・v-model

双方向バインディングを実現する為のディレクティブ。

テキストボックスに入力された内容が即時反映させることができる。

「v-on」,「v-bind」の機能をまとめて双方向バインディングを実現している。

・v-on

​イベント発火に利用する。

書き方

<div v-on:イベント名="処理（関数）"></div> 

省略記法

<div @イベント名="処理（関数）"></div>

プロジェクト内に上記の書き方を混合させてはいけない。可読性が下がる！

・v-bind

Modelの値をHTMLコンポーネントに反映させる。Modelからの一方通行。

書き方

<div>
  <img v-bind:属性の名前="属性に代入される変数名"/>
</div>

省略記法

<div>
  <img :属性の名前="属性に代入される変数名"/>
</div>

Vue.jsわかってくるとどんどん面白いですね・・・。

以上です。ここまで見て頂きありがとうございました！