Vue.js

外観

目次

Building Together

ViteConf 24 - Oct 3

Get your free ticket!

Vue アプリケーションの作成 ​

アプリケーションのインスタンス ​

すべての Vue アプリケーションは createApp 関数で新しい アプリケーションのインスタンス を作成することから始まります:

js
import { createApp } from 'vue'

const app = createApp({
  /* ルートコンポーネント オプション */
})

ルートコンポーネント ​

createApp に渡しているオブジェクトは、実際にはコンポーネントになります。すべてのアプリには、「ルートコンポーネント」という、他のコンポーネントを子要素として保持できるものが必要です。

もし単一ファイルコンポーネントを使用しているなら、通常、ルートコンポーネントを他のファイルからインポートします:

js
import { createApp } from 'vue'
// ルートコンポーネントを単一ファイルコンポーネントからインポートする
import App from './App.vue'

const app = createApp(App)

このガイドにある多くの例では単一コンポーネントしか必要としない一方で、実際のほとんどのアプリケーションではネスト化された、再利用性のあるコンポーネントツリーで構成されています。たとえば、TODO アプリケーションのコンポーネントツリーは次のようになります:

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

このガイドの後のセクションでは、複数のコンポーネントを定義し、一緒に構成する方法について解説します。ですがその前に、ここでは単一コンポーネントの中で起きていることについて焦点を当てていきます。

アプリのマウント ​

アプリケーションのインスタンスは .mount() メソッドが呼ばれるまで何もレンダリングしません。インスタンスには「コンテナ」引数という、実際の DOM 要素、あるいはセレクター文字列が必要です:

html
<div id="app"></div>
js
app.mount('#app')

アプリのルートコンポーネントのコンテンツはコンテナ要素の中でレンダリングされます。コンテナ要素自体はアプリの要素として見なされません。

この .mount() メソッドはすべてのアプリの設定やアセットの登録が完了した後、常に呼ばれる必要があります。また、アセット登録をするメソッドとは異なり、返り値はアプリケーションのインスタンスではなく、ルートコンポーネントインスタンスであるということに注意してください。

DOM 内のルートコンポーネントテンプレート ​

通常、ルートコンポーネントのテンプレートはコンポーネント自体の一部ですが、マウントコンテナー内に直接記述することで、テンプレートを別途提供することもできます:

html
<div id="app">
  <button @click="count++">{{ count }}</button>
</div>
js
import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

もしルートコンポーネントに template オプションがすでにない場合、Vue は自動的にコンテナの innerHTML をテンプレートとして使用します。

DOM 内テンプレートは、ビルドステップなしで Vue を使用するアプリケーションでよく使用されます。また、ルートテンプレートがサーバーによって動的に生成される、サーバーサイドフレームワークと組み合わせて使用することもできます。

アプリの設定 ​

アプリケーションのインスタンスは、.config オブジェクトを公開し、いくつかのアプリケーションレベルのオプションを設定することができます。たとえば、すべての子孫コンポーネントから発生したエラーを捕捉するアプリケーションレベルのエラーハンドラーを定義するには次のとおりです:

js
app.config.errorHandler = (err) => {
  /* エラーの制御 */
}

また、アプリケーションのインスタンスは、アプリ用のアセットを登録するいくつかのメソッドもいくつか用意しています。たとえば、次のようなコンポーネントの登録するメソッドがあります:

js
app.component('TodoDeleteButton', TodoDeleteButton)

このメソッドは、TodoDeleteButton をこのアプリケーション内でならどこでも使用できるようにしてくれます。コンポーネントや他のアセットの登録のやり方についてはこのガイドの後のセクションで説明します。アプリケーションのインスタンス API の全リストについては、API リファレンスで確認することができます。

アプリがマウントされる前に、アプリの設定がすべて適用されていることを確認しましょう！

複数のアプリケーションのインスタンス ​

同じページにアプリケーションのインスタンスが 1 つに制限されるわけではありません。 createApp API は同じページ内で複数の Vue アプリケーションが共存することができ、それぞれが独自の設定やグローバルアセットを備えたスコープをもつことができます:

js
const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

もし Vue をサーバーレンダリングされた HTML を拡張するために使用していたり、大きなページの中で特定の一部を操作するためだけに必要とするなら、ページ全体で単一の Vue アプリケーションのインスタンスでマウントするのを避けましょう。その代わりに、複数の小さなアプリケーションのインスタンスを作成し、それぞれの受け持つ要素の上でマウントするようにしてください。

このページを GitHub で編集