- 目的:JS でラクにアプリケーションを作成するため
- メリット:汎用的な(仕様変更に強い)設計ができる
-
DOM を操作
-
非同期でデータを取得
👉 アプリケーションを作る
-
JS でアプリケーションを制作する際の便利機能をパッケージしたもの
👉 素の JS で書くと面倒なことも、すでに機能化されている
-
フレームワークを使うことで、実装方法を共通化することができる
👉 同じ要件に対して、記述方法を統一することができる
-
記述方法は HTML にマスタッシュやディレクティブを記述して使用する
👉 学習コストが低い
-
Vue.js で DOM を操作する際の考え方
👉 データを変更することで DOM を操作する( データバインド )
-
Vue.js は機能をパーツ化できる
👉 機能単位でパーツ化し、組み合わせて設計できる( コンポーネント )
-
ルーターやストアシステムなどのモジュールを組み合わせることでフレームワーク的なものになる
👉 段階的に機能を追加できる( プログレッシブ )
-
アニメーション用の機能も持っている
👉 UX を考慮したアプリケーションの作成が(比較的)容易にできる
-
データにより View を操作する
-
イベント発火時にデータを操作し、View を変える
👉 DOM と関数に依存関係がなくなり、それぞれ追加・削除などの改修がラクにできる
-
機能として独立しているコンポーネントを組み合わせて開発
👉 他コンポーネントに依存させないことで、追加・削除などの改修がラクにできる
実際に制作してみましょう!
Vue 用デバッガ:Vue.js devtools for Chrome or Firefox
- Vue.jsの製品版または縮小版のビルドを使用している場合、devtoolsのVueペインは表示されません
- Chromeの場合、ローカル(file://)環境でVue.js devtoolsを有効にするには機能するようにするには、Chromeの拡張機能管理の設定で「ファイルの URL へのアクセスを許可する」を ON にしてください
おすすめエディタ:Visual Studio Code & Vue VS Code Extension Pack