Mustache{{ }}構文を使って変数などのデータを表示できるようになりましょう

## 問題1. Vueインスタンスを作成しよう

###### index.html Vue.jsを使う際にVueインスタンスを作成する必要があります。まずは次のコードを`index.html`にコピー&ペーストしましょう。 ~~~js const app = new Vue({ el: '#app', data: { message: 'こんにちは' } }) ~~~

## 問題2. message を呼び出して表示しよう html内に`{{ }}(マスタッシュ構文)`を記述することで、Vueインスタンスを呼び出すことができます。 Vueインスタンスで`el: '#app'`と記述しているため、必ず`

`の間で呼び出すようにしてください。 ~~~html

~~~

###### index.html Vueインスタンス内の`message`という変数を呼び出して表示しましょう。次のコードをコピー&ペーストして確認しましょう。 ~~~html

~~~

## 問題3. 計算式の答えを表示しよう

###### index.html JavaScriptの計算式を直接記述できます。次のコードをコピー&ペーストして確認しましょう。 ~~~html

2足す3は {{ 2 + 3 }} です

~~~

スキル図鑑

.css-x7cx95{padding:var(--chakra-space-2);}@media screen and (min-width: 600px){.css-x7cx95{padding:0px;}}Mustache{{ }}構文

コーディングにチャレンジしよう！

Mustache{{ }}構文