[Vue.js]Vueインスタンスの作成とデータバインディング、テンプレートについて

前回に引き続いて、Vue.jsの学習を進めていきます。前回は、講座の紹介や学習環境などを紹介しました。

Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。

Vueインスタンスの作成

Vueインスタンスを作成する方法です。学習環境としてjsFiddleを推奨されているので、そちらにVue.jsを読み込み、JavaScript欄にコードを入力していきます。

var app = new Vue({
     // options
})

これでインスタンスを作成できるとのこと。現状はvar appとなっているが、任意の名前をつけることができる。var vmとかもよく使われるとのこと。vm=view model の略。

Vue のデザインは、MVVM パターンと厳密には関連が無いものの、部分的には影響を受けています。慣例として、 vm (ViewModel の略) を Vue インスタンスの変数名としてよく使います。

https://jp.vuejs.org/v2/guide/instance.html

ルートVueインスタンスを変数化しておくことによって、コンソールからアクセスすることができます。その必要がない場合には、省略しても大丈夫。

new Vue({
    // options
})

データバインディングとは

データバインディングとは、ざっくり言うとデータと描画を同期する仕組み、とのこと。

よく見るのが、フォームに入力した情報によってリアルタイムで結果が変わったりするもの、見たことありますよね？そういったもののことを言うようです。

https://jp.vuejs.org/v2/guide/forms.html

データバインディングの種類

• 双方向バインディング（TwoWay）
• 単方向バインディング（OneWay）
• ワンタイムバインディング（OneTime）

テンプレートとは

• HTMLベースのテンプレート構文を利用した、描画部分に関する記述のこと
• いわゆる、V（view）に相当

ということです。

公式サイトでは「テンプレート構文」というページがあり、

Vue.js では HTML ベースのテンプレート構文を使っているので、Vue インスタンスのデータと描画された DOM を宣言的に対応させることができます。全ての Vue.js テンプレートは、仕様に準拠しているブラウザや HTML パーサによってパースできる有効な HTML です。

内部では、Vue はテンプレートを Virtual DOM の描画関数にコンパイルします。リアクティブシステムと組み合わせて、Vue は再描画に必要なコンポーネントをインテリジェントに把握でき、アプリケーションの状態が変わった時に最低限の DOM 操作を適用します。

https://jp.vuejs.org/v2/guide/syntax.html

テンプレートを作ってみる

jsFiddleのHTML部分に以下のように入力してみます。

<div id="app">

</div>

div要素にidappを付与しています。id名に関しては任意のもので構わない、とのこと。

次に、JavaScript側のVueインスタンスに戻り、マウントする要素を指定します。

var app = new Vue({
  el: '#app'
})

elはアプリケーションを紐づける要素セレクタを指定します。（el = element の略）

これで、Vue.jsを使う要素をid="app"と指定することになります。言い換えると、id="app"の部分以外はVue.jsは影響しないということが言えるとのこと。

テキストのデータバインディングを実装

まず最初に表示するテキストのデータを定義します。DOMの更新を自動化するデータバインディングを行う際に、テンプレートで使用する全てのデータは、リアクティブデータとして定義する必要があります。

具体的な例として、Excelなどの表計算アプリで関数などを用いて自動的に計算をさせる場合、ある数値を変更するとそれに関連する数値もリアルタイムで変更されるという動作を見たことがある方も多いかと思います。

リアクティブなデータの定義を行う

dataオプションでアプリ内で利用するデータを定義しておくことができます。

var app = new Vue({
  el: '#app',
  data: {
  	message: 'Hello Vue.js!'
  }
})

表示部分をHTML側で作る

次に、先ほど定義したデータを表示する部分をHTML側で作ります。

<div id="app">
  <p>
    {{ message }}
  </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

dataオプションで指定したデータを{{ }}で変数名を囲っている点がポイントです。これはマスタッシュ構文を利用したテキスト展開です。

jsFiddleでプログラムを実行してみる

ここまで記述が終わったら一度プログラムを実行してみましょう。

jsFiddleの画面左上のRunボタンを押して見ます。すると、右下の実行結果表示エリアに「Hello Vue.js!」と表示されることがわかりますね。

これでアプリ内で定義したデータがView側に渡って表示されていることが確認できると思います。

<div id="app">〜</div>部分がVue.jsでアプリとして取り扱われている部分ですので、それ以外の部分に先ほど記述した{{ message }}を記述してみても、変数名だけが表示されるということになります。

<div id="app">
  <p>
    {{ message }}
  </p>
</div>
{{ message }} //←これ

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

実行結果は、

Hello Vue.js!

{{ message }}

となります。

Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。

まとめ

なんとなくVue.js勉強してる感を感じれる内容になってきました。データバインディングの画面とか見るとちょっとワクワクしてくるしね。

そして、講座の動画と併せて、公式ドキュメントも参照しながら進めると、理解が深まりますね。素敵です。

https://jp.vuejs.org/v2/guide/