Vue.js超初級編　マウント - コツコツ学習ブログ

HTMLファイル内でVue.jsを使用するには、マウントと呼ばれる処理が必要である。方法は様々あるようだが、まずは教本などでよく出てくるパターンを参考に、何をしているのか書く。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>Vue.js 3</title>
</head>

<body>

  <div id="app">
  <!-- Vuejsを適用するフィールド -->
  </div>
  <script src="https://unpkg.com/vue@3.1.5"></script>
</body>
</html>

// Vue.cretareAppの戻り値はVueインスタンス
const app = Vue.createApp({
//Vueインスタンスの設定を行う
})
app.mount('#app')

HTMLファイルでは、div id="app"を記述。 JSファイルでその部分にVue.jsを適用=マウントするように記述している。 Vue.createAppでVueインスタンスを生成し,appに代入。インスタンスappをmountメソッドでid=appの部分にマウントすることで、 Vue.jsの仮想DOMがその部分に適用される運びとなる。