参考サイト
導入
- Vueの導入はCDNを使った方法と関連ファイルをダウンロードする方法があるそうですが、今回はCDNを使った方法を紹介します。
- 以下のコードをHTMLファイルに追加すればOKです。ヘッダー辺りに追加しましょう。
<script src="https://unpkg.com/vue@3.2.37/dist/vue.global.js"></script>
Hello Worldの表示(1)
コード解説
JS内
| appdata | data関数のreturn内に使用するオブジェクトをまとめておく。 |
|---|---|
| Vue.createApp(appdata) .mount('#idName') |
HTML内のid ="idName"のタグで、appdataで指定した処理などをできるようにする。 |
HTML内
| {{message}} | 変数messageを表示 |
|---|
Hello Worldの表示(2)
先ほどのappdata内のdataは複数の返り値を持たせられるので、これでもほぼ同じような動作をします。
See the Pen
Untitled by purple_hat (@purple_hat)
on CodePen.
