わかった気になりたい。～Vue.js編②～

こんにちは。

プログラミングやってっか？？？

こちらは開発環境が6日もの間用意されず、ひたすらドキュメントを読むしかないという非常に充実した日々を過ごしております。

あー

プログラミングさせてくれぃ！！！

しましょう。

Vue.jsでね。

という訳で、Vue.js編パート2でございます。

今回は、

・データバインディング

・ディレクティブ

の2点について触れていきます。

南キャンの山ちゃんおめでとう。（唐突な祝福）

データバインディング

前回の記事で、View（html）とView Model（js）の2つを使って、新しい技術を試すときの十八番（Hello Worldを表示させるだけのやつ）をやりましたね。

あのように、描画（html）とデータ（js）を連携する仕組みのことを、

データバインディングと呼びます。

でも、描画とデータって別に連携させなくても良くね？

とお思いの貴方。

考えてみてください。

描画とデータを連携させなければ、

ECサイトで買い物をしようとすると、

ペットボトルの水1ケースが100万円

ロマネコンティが50円

白トリュフが2円

ごえんですよ！チョコが1万円

こんなカオスなことになってしまうのです。

これで貴方もデータバインディングに足を向けて寝ることができませんね。

そして、Vue.jsはデータバインディングに関する多くの機能を持ったフレームワークなのです。

さらに、ディレクティブによってhtmlを扱うかのような感覚でこれらの機能を活用できます。

新しい言葉が出てきたので次行きましょう。

ディレクティブ

さて、ディレクティブとは何か？ですが、

まずはこちらのコードをご覧ください。

こちらのコードのHTMLの「v-bind」という属性がディレクティブと呼ばれるものです。

この「v-」から始まる属性はVue.js特有のもので、HTMLとJSをリアルタイムでつないでくれる便利なヤツです。

主なディレクティブの例は以下です。

v-bind・・・要素を埋め込む。

例、ホバーで要素を表示させる

v-if・・・条件によって処理を変える

例、クリックされたら、アコーディオンを表示させる処理を行う

v-for・・・要素の配列を表示させる

例、動的に商品リストを表示させる

v-model・・・双方向バインディングを行う

例、HTML側で自分で名前1を入力したら、リアルタイムに名前2を変更する

などなどなど。

ディレクティブには様々な機能がありそうですね。

というわけで、今回はVue.jsの主な機能のデータバインディングと、ディレクティブ属性についてザックリと書きました。

次回は簡単に動くサンプルを作りながら、Vue.jsを掘り下げていきます！

あと、わかりやすいと評判のVue.jsの教本、通称：猫本を購入しました。

近々そちらのレビューも別途書きたいなぁと思ってます。