初心者のための VUE3 入門: Vue.js コンポーネントを使用してドロップダウンメニュー効果を作成する-Vue.js-php.cn

初心者のための VUE3 入門: Vue.js コンポーネントを使用してドロップダウンメニュー効果を作成する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2023-06-15 21:11:47

オリジナル

3551 人が閲覧しました

Vue.js は、開発者がインタラクティブな Web アプリケーションを簡単に作成できるようにする人気の JavaScript フレームワークです。コンポーネント化されたアーキテクチャがその重要な特徴です。この記事では、Vue.js コンポーネントを使用してドロップダウンメニューの効果を作成する方法を紹介します。

1. Vue.js をインストールする

Vue.js をインストールしていない場合は、最初に次のコマンドを使用してインストールしてください:

npm install vue

ログイン後にコピー

または、次の場所にダウンロードできます。 Document Center Vue.js を作成し、<script> タグを使用して HTML ファイルに導入します:

<script src="path/to/vue.js"></script>

ログイン後にコピー

2. Vue インスタンスを作成します

最初に、コンポーネントを定義する Vue インスタンスを作成する必要があります。次のコードを使用して Vue インスタンスを作成できます:

var app = new Vue({
  el: '#app',
  data: {
    showMenu: false,
    options: [
      {text: 'Option 1', value: '1'},
      {text: 'Option 2', value: '2'},
      {text: 'Option 3', value: '3'}
    ]
  },
  methods: {
    toggleMenu: function() {
      this.showMenu = !this.showMenu;
    },
    selectOption: function(option) {
      console.log(option);
    }
  }
});

ログイン後にコピー

この Vue インスタンスには 2 つのプロパティがあります: showMenu はドロップダウンメニューの表示と非表示を制御するために使用されます。 #options は、ドロップダウンメニューのオプションを保存する配列です。

また、2 つのメソッドも定義しました:

toggleMenu は、ドロップダウンメニューの表示と非表示を切り替えるために使用されます; selectOption は、ドロップダウンメニューの表示と非表示を切り替えるために使用されます。オプションが選択されています。

3. ドロップダウンメニューコンポーネントを定義する

次に、ドロップダウンメニューを表示する Vue コンポーネントを定義する必要があります。次のコードを使用できます:

Vue.component('dropdown', {
  props: {
    options: {
      type: Array,
      required: true
    },
    showMenu: {
      type: Boolean,
      required: true
    },
    selectOption: {
      type: Function,
      required: true
    }
  },
  template: `
    <div class="dropdown" v-bind:class="{ 'is-active': showMenu }">
      <div class="dropdown-toggle" v-on:click="toggle()">
        <span>Select an option</span>
        <i class="fa fa-angle-down"></i>
      </div>
      <div class="dropdown-menu">
        <ul>
          <li v-for="option in options" v-on:click="select(option)">
            {{ option.text }}
          </li>
        </ul>
      </div>
    </div>
  `,
  methods: {
    toggle: function() {
      this.$emit('toggle');
    },
    select: function(option) {
      this.$emit('select', option);
    }
  }
});

ログイン後にコピー

このコンポーネントには 3 つのプロパティがあります:

options はドロップダウンメニューのオプションリストであり、showMenu はドロップダウンメニューの制御に使用されます。ドロップダウンメニューの表示と非表示。selectOption は、オプション選択イベントを処理するメソッドです。

コンポーネントのテンプレートでは、2 つの

 要素を定義します。1 つはドロップダウン メニューの表示と非表示を切り替えるためのもので、もう 1 つはオプション リストを表示するためのものです。また、切り替えと選択の処理のための 2 つのイベント ハンドラーも定義します。

4. HTML でのコンポーネントの使用

これで、HTML ファイルで

dropdown コンポーネントを使用できるようになります:

<div id="app">
  <dropdown v-bind:options="options" v-bind:show-menu="showMenu" v-on:toggle="toggleMenu" v-on:select="selectOption"></dropdown>
</div>

ログイン後にコピー

HTML 要素を表示する必要がありますVue インスタンスの

タグを使用してドロップダウンメニューコンポーネントを表示します。また、インスタンスの options プロパティと showMenu プロパティをコンポーネントに渡し、v-on を使用してイベントハンドラーをコンポーネントの toggle にバインドします。および select イベント。

5. CSS スタイルを使用してドロップダウンメニューを美しくする

最後に、ドロップダウンメニューを美しくするためにいくつかの CSS スタイルを追加する必要があります。以下にいくつかのスタイルの例を示します。

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  padding: 0.5rem;
  background-color: #fff;
  border: 1px solid #ccc;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  background-color: #fff;
  z-index: 1000;
  display: none;
}

.dropdown-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.dropdown-menu li {
  padding: 0.5rem;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: #f9f9f9;
}

ログイン後にコピー

上記のスタイルは、クリーンで魅力的なドロップダウンメニューの外観を作成します。

6. 概要

この記事では、Vue.js を使用してドロップダウンメニューコンポーネントを作成する方法を検討しました。まず、Vue インスタンスを作成してコンポーネントを定義し、次にコンポーネントを HTML ファイルに追加し、ドロップダウンメニューを美しくするためのスタイルを追加しました。 Vue.js のコンポーネントベースのアーキテクチャを使用すると、開発者は複雑なインタラクティブな Web アプリケーションを簡単に作成できます。

以上が初心者のための VUE3 入門: Vue.js コンポーネントを使用してドロップダウンメニュー効果を作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。