ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。