まずは最小構成でvueを動かそう
まずはほぼ最小構成でvueを動かしてみましょう!
準備
Vueはjsファイルに書いていきます。もちろん、読み込んだり表示するためのhtmlも必要です。
HTML
読み込むためのコードと、vueで表示したい内容を表示するための部分を作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- CDNやダウンロードでvueを利用する場合のみ必要 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- webpackなどでビルドする場合 -->
<script src="app.js"></script>
<title>Document</title>
</head>
<body>
<!-- vueで制御する領域 -->
<div id="app">
{{text}}
</div>
</body>
</html>
を参考にwebpackでビルドする場合は、distディレクトリ内に配置してください。
次に、jsファイルを用意しましょう。
js
ファイル名はapp.jsとします。前回の記事を参考にwebpackでビルドする場合はsrc/app.jsに配置してください。
import * as Vue from "vue"; // npmから導入したときのみ必要
const app = Vue.createApp({
data() {
return {
text: "Hello, Vue World!!"
}
}
});
document.addEventListener("DOMContentLoaded", () => {
// vueで制御する対象となる場所を指定
app.mount("#app");
});
ビルドする場合は、npm run watchして保存のたびにコンパイルできるようにしましょう。
さて、いよいよHTMLを開いて表示してみます。
See the Pen Untitled by Totori (@souki202) on CodePen.
となっていれば成功です!
mount
上の例の通り、createAppしただけでは表示されません。createAppしてcreateしたものは、どこに適用するのかを指定する必要があります。
Vueは、適用した範囲以外にVueの構文を使っても認識しないので注意しましょう。
まとめ
Vue.jsはとてもシンプルです。HTML側に特定の構文で文字を書くことで、vueの値を適用できます。
次はvueの値を使ってHTMLに表示する方法を見ていきましょう。
