VUE3 クイック スタート: Vue.js プラグインを使用してポップアップ コンポーネントを作成する

Vue.js は、ユーザー インターフェイスを構築するためのコンポーネントベースの方法を提供する人気のある JavaScript フレームワークです。最新の Vue.js バージョン 3 は、パフォーマンスが最適化されているだけでなく、いくつかの新機能も追加されています。この記事では、Vue.js 3 とプラグインを使用してポップアップ コンポーネントを作成する方法を簡単に紹介します。

1. Vue.js 3 アプリケーションを作成する

開始する前に、Node.js と Vue CLI をインストールする必要があります。 npm を使用してこれらのツールをインストールできます:

npm install -g @vue/cli

次に、Vue CLI を使用して新しい Vue.js 3 アプリケーションを作成します:

vue create my-app
cd my-app
npm run serve

これにより、「my-app」という新しいアプリケーションが作成されますそして開発サーバーを起動します。

2. Vue.js プラグインのインストール

ポップアップ コンポーネントを作成するには、Vue.js Modal というプラグインを使用します。プラグインをインストールするには、次のコマンドを実行します。

npm install vue-js-modal

src/main.js ファイルを開き、次の内容を追加します。

import Vue from 'vue'
import App from './App.vue'
import VModal from 'vue-js-modal'

Vue.config.productionTip = false

Vue.use(VModal)

new Vue({
  render: h => h(App),
}).$mount('#app')

まず、Vue コンポーネントと App コンポーネントをインポートしました。次に、Vue.js Modal プラグインをインポートし、Vue.use(VModal) を実行して、それを Vue.js アプリケーションの拡張機能として使用しました。

3. ポップアップ ウィンドウ コンポーネントの作成

ここで、独自のポップアップ ウィンドウ コンポーネントの作成を開始できます。この場合、ユーザーがログインが必要なアクションを実行しようとした場合に備えて、単純なログイン フォームを作成します。

まず、新しい Vue.js コンポーネントを作成する必要があります。 LoginModal.vue という新しいファイルを作成し、次のコードをそこにコピーします。

<template>
  <div id="login-modal">
    <h1>Login</h1>
    <form>
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // Your login logic goes here
      this.$emit('close')
    }
  }
}
</script>

このコンポーネントには、ユーザーがユーザー名とパスワードを入力できるフォームが含まれています。フォームが送信されると、ログイン ロジックを含むログイン メソッドが呼び出されます。この例では、プレースホルダー メソッドを使用し、その中で close イベントを発行してポップアップ ウィンドウを閉じます。

次に、この LoginModal コンポーネントを別のコンポーネントで使用して、ポップアップ ウィンドウを作成します。

4. ポップアップ コンポーネントを使用する

App.vue ファイルを開き、テンプレート タグ内の任意の場所に次のコンテンツを追加します:

<modal name="login-modal">
  <login-modal @close="$modal.hide('login-modal')"></login-modal>
</modal>
<button @click="$modal.show('login-modal')">Show Login Modal</button>

このコードは Vue を使用します。 js Modal プラグインによって提供される手順。まず、Name プロパティを使用して名前を付けたモーダル ウィンドウを定義します。このモーダル ウィンドウには、先ほど作成した LoginModal コンポーネントが含まれています。するとページにボタンが追加され、クリックするとモーダルウィンドウが表示されます。

モーダル ウィンドウを閉じるには、LoginModal コンポーネントで close イベントを発行する必要があります。 $modal.hide('login-modal') メソッドを使用すると、親コンポーネントでそれをリッスンし、モーダル ウィンドウを閉じることができます。

5. 結論

この記事では、Vue.js 3 とプラグインを使用してポップアップ コンポーネントを作成する方法を学びました。 Vue.js Modal プラグインを使用すると、モーダル ウィンドウを直接作成できるようになり、単純な Vue.js コンポーネントを使用するだけで済みます。このようにして、ユーザーがインタラクティブな Web アプリケーションと対話できるようにする複雑なユーザー インターフェイスを迅速かつ簡単に作成できます。

以上がVUE3 クイック スタート: Vue.js プラグインを使用してポップアップ コンポーネントを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。