[[📗01 Hello Vite and Vue!!]] < [[📒Vue.jsクエスト]] > [[📗03 令和はscript setup時代]] ## Abstract templateの超基礎を習得してみましょう。簡単すぎて退屈かもしれませんが我慢してください。そのうち退屈しなくなる日がきます。きっと。 ## Requirements - [[📗01 Hello Vite and Vue!!]]の成果物 ## Lesson `.vue`ファイルの`<template></template>`内に記載されたコードは[[HTML]]のように解釈されブラウザでレンダリングされます。 `例: Minervaという文字列型リンク` ```html <template> <a href="https://minerva.mamansoft.net/">Minerva</a> </template> ``` また、[[Mustache構文]]を使うと式として解釈できます。 ```html <template> 1 + 2 = {{ 1 + 2 }} </template> ``` 上記は `1 + 2 = 3` とレンダリングされます。 ## Missions ### Mission 1 #😁EASY `App.vue`を編集してトップページを `Hello World` と表示されるだけのページに変更してください。そのときのコードを記載してください。 ただし、==要件を満たす最小構成==にしてください。(消しても題意を満たすものは消してください) %% 回答例 ``` <template> Hello World </template> ``` %% ### Mission 2 #😁EASY [[Mustache構文]]を使って意味のある`.vue`ファイルを書いてください。 %% 回答例 [[Mustache構文]]が有効活用されていればなんでもよい。 %%