Vue.js
https://gyazo.com/525d7e99d0f9172fd4038823c8664cc4
View層に特化したライブラリ
特徴
学習コストが低い
コンポーネント指向によるUIの構造化
リアクティブなデータバインディング
設計思想
プログレッシブフレームワーク
フレームワークはどんなどきにでも、どんな規模でも、段階的に柔軟に使えるべきである。
段階的領域
https://gyazo.com/abf6c31625df0bd4ae025296c07497dd
宣言的レンダリング Declarative Rendering
宣言的なDOMレンダリングが必要な領域
HTMLレンプレートにレンダリングする対象を宣言的に(webブラウザがわかるように)記載することで、データの変更のたびにリアクティブなDOMレンダリングと、ユーザーによる入力データの同期が可能に
UIをモジュール化して再利用する必要がある領域
Vue.jsの役割
ルーティング(アプリケーションのURL設計、指示)を行う
大規模向け状態管理 Large-scale State Management
コンポーエンント間で状態の共有方法が必要な領域
データフローアーキテクチャに沿った状態管理ライブラリ
ビルドシステム Build System
webアプリケーションのコンポーネントの管理、本番環境の配信、プロジェクト構成に関して考える必要のある領域
vue-cliなどの役割
楽にビルドできるツール
クライアントサーバーデータ永続化 Client-server Data Persistence
Webアプリケーションの複雑なデータ構造の永続化が必要な領域
Vueを支える技術
単一ファイルコンポーネント
オブザーバーパターン
状態の変化を検知して自動的にDOMに反映
レンダリングシステム
重要用語
Vueオブジェクト
参考
ライブラリ
バージョン
ツール
よく使われる拡張機能セット
駄目!
一部、scriptがtemplateと認識されるバグあり
注意
APIで取得したアイテムの一部がconsoleでエラー item.nameが存在するかわからないので怒られる
code:vue.js
<template v-if="userItem.name">
<span>{{ userItem.name.first + userItem.name.last }}</span>
</template>
参考