ゆるっとVue.js勉強会Vue.jsハンズオン「ToDoリストを作ろう」

こんにちは、ロジカルスタジオのコーダー、T.Kです。
今回、ロジカルスタジオ初の試みとして、

外部の方を参加者としてお招きしての勉強会

を弊社オフィスにて行いました！

今回のテーマは？

記念すべき第1回のテーマは、先日の「Output Study!」のテーマでもある、Vue.js！
「Output Study!」では「Vue.jsが大体どんなものなのか知る」のが目的でしたが、
今回の「ゆるっとVue.js勉強会」は

Vue.js を触ってみる
Vue.js の機能を覚える
実際にVue.js を使ってToDoリストを作ってみる

ということが目的となります。

登壇者は先日の「Output Study!」でも登壇してくださいました、上平さん！
また登壇者とは別に、参加者の疑問に答える「メンター」が5名、参加しました。
各セクションは5分で、その間に参加者は登壇者やメンターへ疑問点を自由に質問できる形式です。
説明資料は会場内のディスプレイに映し出される他、参加者の端末からも閲覧可能です！

受付設営完了！
弊社社員、及び弊社マスコットロージーとカールが皆様をお迎えいたします。

Vue.js の機能を知る

イントロダクション、上平さんの自己紹介の終了後、勉強会スタートです！
まずToDoリストを作る前に、Vue.jsの主要な機能を教えていただきました。

データバインディング

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

Vue.jsのdataの中にある変数の値をHTMLに表示する

という機能です！

変数名を{{ }}
で囲む(この記述方法をマスタッシュと呼びます)ことで、変数の値を表示できます。

v-model（ディレクティブ）

Vue.jsに指示を与える仕組みを「ディレクティブ(directive)」と呼びます。
ディレクティブは「v-
」から始まり、タグに直接記述します。
v-model
は、設定した要素の値と変数の値を常に同値にすることができるディレクティブです。

v-if（ディレクティブ）

v-if
は値がtrue
である時はその要素を表示し、値がfalse
となる時その要素を消せるディレクティブです。
またv-if
を記述した直後の要素にv-else
を記述すると、false
の時の表示が可能です。
v-if
の代わりにv-show
を使うと、要素は残したままで、display:none;
を指定した時と同じようになります。

v-for（ディレクティブ）

v-forを使うと、要素をループさせ、複数表示することができます。
下記コードでは、drinks
が持っている要素がループ毎に一つずつdrink
に入ります。
またv-for="(drink, index) in drinks"
のように指定すると、index
を取得することが可能です！
（index
:ループの番号。1回目のループではindex=0
、n回目のループではindex=n-1
）

v-on（ディレクティブ）

v-onはその要素に対して、関数を実行する条件とその関数を指定します。
関数はmethods
内で指定します。
例えば、v-on:onClick="hoge"
と記述すると、その要素のクリック時に「hoge
」という関数を実行します。
また先日の「Output Study!」でもあったように、v-on:
は@
で省略することができます。