Vue Tutorial

まぁ、とりあえずTutorial Videoでも見てみる。

• 0:00 これがVue.jsだ！
  • Vue.js == Javascript framework
  • Web UIが簡単に作れる
• 05:36 このコースの流れ
  • 全部見るつもりならskipでもいいかな
• 08:44 こうしてVue.jsをはじめる(イントロダクション)
• 09:11 「単一ファイルコンポーネント」と「Vite」
• 13:36 こうして開発環境を整える(Node.js, VSCode, create-vue)
• 20:29 create-vueが作成したプロジェクトはどうなっているのか
• 31:20 拡張機能はこうセットアップする(Volar, ESLint, Prettier)
• 39:15 createAppを使ってVueのアプリを作る方法
• 46:59 .vueファイルはこうなっている！
• 52:44 JavaScriptのデータを表示する方法
• 56:09クリックされた時に処理を実行する方法
• 58:50これがリアクティビティだ！
• 1:02:38 ref()を使ってリアクティブなデータを作る方法
• 1:10:29 reactive()を使ってオブジェクトをリアクティブにする方法
• 1:19:41 reactive()とref()はこうして一緒に使える
• 1:27:48 普通のオブジェクトとref()はこうして一緒に使う
• 1:35:58 これがVue.jsの基礎だ！(テンプレート構文, イベントハンドリング, 算出プロパティ, ウォssッチャー, クラス/スタイル)(イントロダクション)
• 1:36:27 これがテンプレート構文だ！
• 1:39:25 二重波括弧()を使ってデータを描画する方法
• 1:41:56 これがv-から始まる特別な属性であるディレクティブだ！
• 1:43:11 v-htmlを使ってデータをHTMLとして出力する方法
• 1:46:29 こうしてv-bindを使って属性値を指定する
• 1:52:00 Boolean属性に対してv-bindを利用する方法
• 1:55:30 v-bindで１度に複数の属性を指定する方法
• 1:57:01 v-onを用いてクリックなどのイベント発生時に特定の処理をする方法
• 2:02:24 イベントオブジェクトを使ってイベントの情報を取得する方法
• 2:05:01 v-onでハンドラーに引数を渡す方法
• 2:06:15 イベント修飾子を使って頻繁に行う処理を簡略化する方法 - stop, prevent
• 2:12:01キー修飾子を使ってキーボードイベントに対して処理をする方法
• 2:14:00 ディレクティブの構造はこうなっている
• 2:15:15 角括弧([])を使ってディレクティブの引数にscriptのデータを指定する方法 2:16:44 v-modelを使用してinputを単純に扱えるようにする方法
• 2:19:25 computedを使って複雑な式を１つにまとめる方法
• 2:30:18 computedを使う時はここに注意する - ReactiveEffect
• 2:46:19 watchEffectを使ってリアクティブなデータの変更を監視する方法
• 2:53:43 watchを使って特定のリアクティブなデータの変更を監視する方法
• 3:09:18 class属性はこう指定する！
• 3:17:49 style属性はこう指定する！