【Vue.js】Vue.jsを勉強しました（シンプルに書けてすごい！）

Vue.js のコードを書く前に，まずVue.js本体を読み込む必要があります。

インストールはこちら☞ 『インストール - Vue.js』

Vue.js本体には「開発バージョン(vue.js)」と「本番バージョン（vue.min.js）」の２種類があり, 開発バージョンは警告出力とデバックモードがあり，学習用に最適だそうです。

本番環境では本番バージョンを使用するようにする必要があるそうですが，このページでは開発バージョンを使用しています。

1.　Vueインスタンスの作成とデータの登録

See the Pen Untitled by おおきたさとる/SatoruOhkita.eth (@satoruohkita417) on CodePen.

elオプションではHTMLとVueインスタンスを結びつけるDOM要素を指定しており，CSSを書くときと同じように指定できます。今回は，#helloを指定しています。

dataオプションではVueインスタンスに持たせたいデータを登録できます。今回は，message1〜3というプロパティ名でデータを登録しています。

dataオプションは，オブジェクトを値に持つことができるので，複数のデータを登録することができます。

2.　登録したデータを表示する

次に，登録したデータを表示します。

登録したデータを表示したいときは，データの名前を二重の波カッコで囲みます。これをMustache構文といいます。

Mustacheは「口ひげ」を意味しており，{{ データ名 }} の形が口ひげっぽいから名付けられたそうです。

今回は {{ message1}}，{{ message2 }}，{{ message3 }}で，登録したデータを表示しています。

3.　属性とクラスをHTMLに結び付ける

Vue.jsは，HTMLの属性値やクラス属性に使用することもできます。

その際には v-bindディレクティブを使います。ディレクティブとは，Vue.jsで用いられる特別な属性のことで 「v-◯○」 と書くのが特徴です。Vue.jsには，他にもさまざまなディレクティブが用意されています。

See the Pen Untitled by おおきたさとる/SatoruOhkita.eth (@satoruohkita417) on CodePen.

「v-vind:属性名＝"参照するデータ名"」と書くことで属性を紐づけています。

class属性は，この記法に加えてオブジェクトや配列を指定することができます。それぞれのプロパティ名が付与されるかどうかは，そのプロパティの値の真偽で決まります。

v-bindは非常によく使うため，省略形として「：」が用意されていて「：属性名＝"参照するデータ名"」と書くことができます。（上のCode Penで，うすい黄色のdivタグは省略形で書いています。）

4.　条件分岐（v-if）

条件によって要素の表示を出し分けることもできます。

v-ifディレクティブを使い，値が真であれば表示され，偽であれば表示されません。

JavaScriptのif文のelse ifに相当する「v-else-ifディレクティブ」やelseに相当する「v-elseディレクティブ」も用意されています。サンプルは次のループ処理のところにあるCode Penで確認してください。

5.　配列をループ処理（v-for="配列名"）

配列をループさせてリスト表示することもできます。

v-forディレクティブを使い， v-for="配列の要素名 in 配列名"の形で書きます。「配列の要素名」を指定することで配列の各要素を参照できて便利です。

See the Pen 【Vue.js】条件分岐とループ処理 by おおきたさとる/SatoruOhkita.eth (@satoruohkita417) on CodePen.

なお，v-forディレクティブを使用する時はkey属性をセットで使う必要があります。Key属性が必要な理由は以下のページで解説されています。

『スタイルガイド - Vue.js』

今回は，配列fruitsの各要素の値に対して，key属性値としてfruitを指定してします。

6.　イベントの処理（v-on:イベント名="行いたい処理"）

クリック，フォームの送信など，イベントが発生した際に何か処理を行いたい場合はv-onディレクティブを使います。

「v-on:イベント名="行いたい処理"」とし，属性値には実行したい処理を指定します。

また，Vue関数のオプションオブジェクトであるmethodsオプションを使えば，複数の処理を登録することもできます。下の例では，「カウント追加」をクリックするとカウント数が更新されます。

See the Pen 【Vue.js】イベント処理 by おおきたさとる/SatoruOhkita.eth (@satoruohkita417) on CodePen.

v-onもよく使う記法のため，省略形として「＠」が用意が用意されています。省略形で書くと「@イベント名="行いたい処理"」となります。

7.　まとめ

Vue,jsを学習してみて，簡単な記述だけでさまざまな処理ができる点におどろきました。

職業訓練で HTML・CSS，JavaScript，PHPと学習を進めてきましたが，Vue.jsを学習を通してプログラミング言語が便利になっていく過程を感じます。

これからもVue.jsをはじめとしたJavaScriptのフレームの学習を続けていきますが，やはりベースとなるJavaScriptの理解が重要ですね。

フレームワークの学習と土台のJavaScriptの学習を行ったり来たりしながら，自分のプログラミング技能を高めていきたいと思います。

Vue.jsでTodoアプリを作っているので，よかったらそちらもご覧ください。

『Todoアプリを Vue.jsで作りました。』