VUE3 クイックスタート開発ガイド-Vue.js-php.cn

Vue3 は、強力な JavaScript フレームワークであり、Vue.js の次世代バージョンです。レンダリングの高速化、型チェックの向上、再利用性の向上など、多くの新機能と改善が提供されます。この記事では、Vue.js を学び始めたばかりの開発者向けに、Vue3 開発をすぐに始めるためのガイドラインを提供します。

Vue3 のインストール

Vue3 をインストールする最も簡単な方法は、Vue3 プロジェクトテンプレートの作成に役立つ Vue CLI を使用することです。次のコマンドを実行するだけです:

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

ログイン後にコピー

コンポーネントの作成

Vue.js アプリケーションはコンポーネントで構成されているため、Vue3 ではコンポーネントは非常に重要な概念です。構成されました。コンポーネントの作成は非常に簡単です。 Vue CLI を使用して作成された Vue3 プロジェクトテンプレートにより、App.vue という名前のコンポーネントが作成されています。これを編集して独自のコンポーネントを作成できます。

最も単純な Vue3 コンポーネントの 1 つは次のとおりです。

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      title: 'Hello, World!'
    }
  }
}
</script>

ログイン後にコピー

上記のコードでは、HelloWorld という名前のコンポーネントを定義します。このコンポーネントには data ## があります。 #コンポーネントデータを保存するための属性。また、title というプロパティを定義し、h1 タグにバインドします。

Vue3 プロジェクトでコンポーネントを使用するには、それを親コンポーネントにインポートする必要があります。

import ステートメントを使用してコンポーネントをインポートする場合は、コンポーネントの名前とファイル内のそのパスを指定する必要があります。

たとえば、上記の

HelloWorld コンポーネントを使用する前に、それを親コンポーネントにインポートする必要があります。

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

ログイン後にコピー

上記のコードでは、

import を渡します。 ステートメントは、HelloWorld コンポーネントを親コンポーネントにインポートし、components 属性を使用して、App コンポーネントの子コンポーネントとして登録します。最後に、親コンポーネントのテンプレートに HelloWorld タグを含めます。

Vue3 には、次のような多くの新機能があります。

テレポート: テレポートは、DOM ツリー内のさまざまな場所でコンポーネントをレンダリングできる新しいコンポーネントタイプです。これは、ポップアップウィンドウ、モーダルボックス、スクロールコンテナーの処理などのシナリオで非常に役立ちます。
フラグメント: フラグメントを使用すると、追加のマークアップを追加せずに、テンプレート内の複数のルートノードを返すことができます。

これらの新機能は、Vue3 の新しい構文と関数を通じて実現できます。例:

VUE3 クイック スタート開発ガイド

VUE3 クイックスタート開発ガイド