コース概要

導入

  • Alpine JS の概要
  • Alpine JS ディレクティブとは何か

はじめに

  • モダンなウェブデザインにおける Alpine JS の役割の理解
  • Alpine JS を使用する方法と、完全なウェブフレームワークを使用するべき時を学ぶ
  • Alpine JS のインストール
  • Alpine JS プログラムの作成

AlpineJs の使用

  • データオブジェクトの再利用: Alpine.data
  • グローバルデータストアの宣言: Alpine.store

Alpine JS ディレクティブ

  • ウェブサイトデータの宣言: x-data
  • トグルの追加: x-show
  • カスタムイベントとイベント修飾子: x-on
  • 動的な HTML 属性の設定: x-bind
  • 高度な属性バインディング: x-bind
  • フォーム要素へのデータバインディング: x-model
  • 要素のコンテンツの設定: x-text と x-HTML

Alpine JS コンポーネントの初期化

  • 要素の初期化時にコードを実行する: x-init
  • 依存関係の変更に応答する: x-effect
  • キーで要素を参照する: x-ref

トラブルシューティング

まとめと次回のステップ

要求

  • ウェブフレームワークの基本的な理解
  • ウェブデザインのための基本的なコーディング経験
  • JavaScript のプログラミング経験

対象者

  • 開発者
 14 時間

参加者の人数


参加者1人当たりの料金

お客様の声 (5)

今後のコース

関連カテゴリー