このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 ディレクティブを使っていこう (02:11) 無料公開中
- 概要
- 学習環境
- コンテンツをJavaScriptで管理
-
#02 v-textで値を埋め込んでみよう (02:07) 無料公開中
- v-text
- {{ }}
-
#03 v-bindで属性値を埋め込んでみよう (02:23) 無料公開中
- v-bind:src
- :src
-
#04 v-onでイベントを設定してみよう (03:03)
- v-on:click
- ref()
- リアクティブな値
-
#05 リアクティブな値を操作してみよう (02:54)
- @click
- count.value++
- リアクティブな値の仕組み
-
#06 v-if､v-elseで条件分岐してみよう (02:53)
- v-if
- v-else
- v-ifとtemplateの組み合わせ
-
#07 v-forでループ処理をしてみよう (01:55)
- v-for
-
#08 WorkSection.vueを実装していこう (02:29)
- セクションをコンポーネント化
- ファイル作成
- 内容移動
-
#09 コンポーネントを読み込んでいこう (02:31)
- WorkSectionの読み込み
- 作品情報のオブジェクト作成
-
#10 propsを使ってみよう (02:44)
- コンポーネントに情報を渡す
- :imgUrl
- defineProps()
-
#11 他のデータも埋め込んでいこう (02:49)
- :title
- :desc
- v-bind
-
#12 データを整備していこう (02:41)
- 作品情報の配列作成
-
#13 すべての作品を表示してみよう (02:17)
- 作品情報の配列を表示
- v-for
- v-bind
