サンプル集

ichigo.js の動くサンプルです。各ページはソースを読みながら試せます。学べる概念とあわせて紹介します。

アプリ例

サンプル	学べること
Todo リスト	`data` / `computed`、リスト操作、`v-model`、`localStorage` 連携
ショッピングカート	数量・小計・送料の算出、双方向バインド、クーポン処理
商品検索	入力に応じた絞り込みと並べ替え、`computed` の連鎖

サンプル	学べること
ライフサイクルフック	`@mount` / `@mounted` / `@updated` / `@unmounted`、`$ctx`、CSS アニメーション
チャート連携	`$ctx.userData` で Chart.js を保持・破棄、`computed` と連動
アニメーション	Anime.js とライフサイクルフックの組み合わせ、スタッガー演出

サンプル	学べること
Resize Observer	`v-resize` で要素サイズを監視、`:options.resize`
Intersection Observer	`v-intersection` で可視判定、しきい値オプション
Performance Observer	`v-performance` でマーク・メジャーを観測

すべての一覧は ichigojs のサンプルトップを参照してください。