Vue.js

The `createApp` function in Vue.js is a function for initializing an application in Vue 3 and mounting it to a specified DOM element.

createApp

　Vue.jsの createApp関数は、Vue 3でアプリケーションを作成するための基本的な関数です。この関数を使って、Vueコンポーネントをルートに登録し、アプリケーションのインスタンスを生成します。

Vue 3のCDNを使ったcreateAppの使い方

HTMLファイルの作成
Vue 3のCDNリンクを含む基本的なHTMLファイルを作成します。

HTML

<!-- 開発環境向け -->
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<!-- 本番環境向け -->
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>

HTML

<div id="app">{{ message }}</div>
<script src="app.js"></script>
JavaScriptファイルの作成
app.jsという名前の JavaScriptファイルを作成し、createAppを使って Vueアプリケーションを作成します。

JavaScript

// app.js
const { createApp } = Vue;

const app = createApp({
	data() {
		return {
			message: 'Hello, Vue 3!'
		};
	}
});

app.mount('#app');
表示例
{{ message }}
createApp関数
createApp関数は、Vueアプリケーションのインスタンスを作成します。引数としてオブジェクトを渡し、その中で dataや methodsなどのオプションを定義します。
dataオプション
dataオプションは、アプリケーションの状態を定義します。ここでは、messageというプロパティに文字列を格納しています。
mountメソッド
mountメソッドは、Vueアプリケーションを指定した DOM要素にマウントします。この例では、IDがappの <div>要素にアプリケーションをマウントしています。

　このように、Vue 3の CDNを使うことで、簡単に Vueアプリケーションを作成し、ページに表示することができます。