Getting started with VUE3 for beginners: Using Vue.js components to create drop-down menu effects

Vue.js is a popular JavaScript framework that allows developers to easily create interactive web applications. Its componentized architecture is an important feature of it. In this article, we will introduce how to use Vue.js components to create drop-down menu effects.

1. Install Vue.js

If you have not installed Vue.js, please use the following command to install it first:

npm install vue

Or you can download it in the Document Center Vue.js, and then use the <script> tag to introduce it in the HTML file:

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

2. Create a Vue instance

First, we need to create a Vue instance in which to define our component. We can use the following code to create a Vue instance:

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);
    }
  }
});

This Vue instance has two properties: showMenu is used to control the display and hiding of the drop-down menu; options is An array to store the options in the drop-down menu.

We have also defined two methods: toggleMenu is used to toggle the display and hiding of the drop-down menu; selectOption is used to handle events triggered when an option is selected.

3. Define the drop-down menu component

Now, we need to define a Vue component to display the drop-down menu. We can use the following code:

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);
    }
  }
});

This component has three properties: options is the option list of the drop-down menu; showMenu is used to control the display and hiding of the drop-down menu; selectOption is the method for handling the select option event.

In the component's template, we define two <div> elements, one for switching the display and hiding of the drop-down menu, and the other for displaying the option list. We also define two event handlers for switching and selection handling.

4. Using components in HTML

Now we can use our dropdown component in the HTML file:

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

We need to display The HTML element of the Vue instance and uses the <dropdown> tag to display the drop-down menu component. We also pass the instance's options and showMenu properties to the component and use v-on to bind the event handler to the component's toggle and select events.

5. Use CSS styles to beautify the drop-down menu

Finally, we need to add some CSS styles to beautify the drop-down menu. Here are some example styles:

.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;
}

The above styles will create a clean and attractive dropdown menu look.

6. Summary

In this article, we explored how to create a drop-down menu component using Vue.js. First we created a Vue instance and defined the component, then added the component to the HTML file and added styles to beautify the drop-down menu. Using Vue.js’s component-based architecture, developers can easily create complex interactive web applications.

The above is the detailed content of Getting started with VUE3 for beginners: Using Vue.js components to create drop-down menu effects. For more information, please follow other related articles on the PHP Chinese website!