これだけは押さえておきたい Vue.js の基礎知識 CSS NiteLP64

株式会社HAMWORKSの長谷川 広武(ハム)さんによるVue.jsのセッション。

Vue.jsを使ったことはある人は会場の半分。

触ったことのない人向けの、基礎知識の解説です。

Vue.jsとは

Vue.jsは、The progressive JavaScript Flameworkといわれ、進歩的なフレームワーク。

開発者が段階的に選択できるフレームワークという意味合いです。

有名なjQureyはライブラリ、フレームワークは処理を実行する枠組みのこと。ライブラリは家電、フレームワークは家というイメージです。

jQueryはまだまだ現役。シンプルなコードで利用可能でプラグインが絶大で効率化には良いですが、DOMの追加にはhandlebars.jsなどのテンプレートが必要。

jQuery単体だと不向き、苦手な案件も出てきています。

Vue.jsはデータと表示を同期させる処理が得意で、DOMの変更などに向いています。

Vue.jsの基礎

公式サイトからダウンロードする際、開発用を選択すると、エラーなども表示されるようです。

HTMLから読み込み、elはエレメントの略で、Vue.jsを利用するIDを指定。

二重中括弧を入れるのがMustache構文と言われます。

リアクティブという仕組みがあり、外側からの指定も可能。(詳細は後日リライト)

dataを変更すると表示(View)も変わるもの。

ディレクティブ(v-xxx)という機能を使うと条件分岐も可能。

ループと属性もあり、v-for、v-bindで、タイトル、本文の流し込みなども指定ができます。

イベントをつけるときは、v-onをHTML側に書くことで設定可能。vueのインスタンスにmethodsを指定すると、そのイベントが起きたときの処理が指定できるようです。

双方向バインディングはv-modelで指定したものをそのまま表示できる機能です。

Vueのコンポーネントとして作成することも可能でその中にインスタンスを入れ、複数のコンポーネントを利用可能。

本家サイトにもチュートリアルがありますが、英語で分かりづらいので、たにぐちまことさんのチャンネルなどがおすすめとのこと。

まとめ

Vue.jsは必須ではないですが、何ができるかは知っておくべき。コンポーネント単位での機能向き。他のフレームワークよりも導入が敷居が低いので、まずは触ってみましょう。

お問い合せはこちらから
無料メルマガ登録

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA