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と認識されるバグあり

注意

item.nameが存在するかわからないので怒られる

code:vue.js

<template v-if="userItem.name">

<span>{{ userItem.name.first + userItem.name.last }}</span>

</template>

参考