VUE3 quick start: using Vue.js instructions to switch tabs

This article aims to help beginners quickly get started with Vue.js 3 and achieve a simple tab switching effect. Vue.js is a popular JavaScript framework that can be used to build reusable components, easily manage the state of your application, and handle user interface interactions. Vue.js 3 is the latest version of the framework. Compared with previous versions, it has undergone major changes, but the basic principles have not changed. In this article, we will use Vue.js instructions to implement the tab switching effect, with the purpose of making readers familiar with the common syntax and concepts of Vue.js.

In the first step, we need to create a Vue instance and then mount it to a DOM element on the HTML page. In Vue.js 3, the way to create a Vue instance is similar to Vue.js 2, just pass an object as a parameter. We also need to declare a data property tabs in the Vue instance, which will contain the tab's title and content.

<div id="app">
  <ul>
    <li v-for="(tab, index) in tabs" :key="index" @click="activeTabIndex = index">{{ tab.title }}</li>
  </ul>
  <div v-for="(tab, index) in tabs" :key="index" v-show="activeTabIndex === index">{{ tab.content }}</div>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      tabs: [
        {
          title: 'Tab 1',
          content: 'This is the content for Tab 1'
        },
        {
          title: 'Tab 2',
          content: 'This is the content for Tab 2'
        },
        {
          title: 'Tab 3',
          content: 'This is the content for Tab 3'
        }
      ],
      activeTabIndex: 0
    }
  }
})

app.mount('#app')
</script>

In the above code, we use the v-for directive to traverse the loop tabs array, use the :key directive to set a unique identifier for each element, and the @click directive binds the tab. Click event, when a tab is clicked, its index value is assigned to the activeTabIndex data property. At the same time, use the v-show command to display or hide the corresponding tab content according to the value of activeTabIndex.

Now, we have successfully created a Vue instance and mounted it on the HTML page. Next, we need to write styles to improve the appearance of the tab.

ul {
  display: flex;
  list-style: none;
  padding: 0;
  background-color: #eee;
}

li {
  padding: 10px;
  cursor: pointer;
}

li:hover {
  background-color: #ddd;
}

li.active {
  background-color: #fff;
}

div {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
}

In the above style, we set some basic styles for the tab list and tab content block, such as background color, border, padding, etc. In addition, we have also defined the :hover and .active styles for the li element of the tab. When the mouse hovers over the tab, the background color will change; when the tab is active, the background color will change to white.

So far, we have completed the basic layout and style of the tab. Finally, we should do some final work in the Vue instance to ensure that tab switching is smooth and correct.

<div id="app">
  <ul>
    <li v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTabIndex === index }" @click="activeTabIndex = index">{{ tab.title }}</li>
  </ul>
  <div v-for="(tab, index) in tabs" :key="index" v-show="activeTabIndex === index">{{ tab.content }}</div>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      tabs: [
        {
          title: 'Tab 1',
          content: 'This is the content for Tab 1'
        },
        {
          title: 'Tab 2',
          content: 'This is the content for Tab 2'
        },
        {
          title: 'Tab 3',
          content: 'This is the content for Tab 3'
        }
      ],
      activeTabIndex: 0
    }
  },
  watch: {
    activeTabIndex(newValue, oldValue) {
      console.log(`The active tab index has changed from ${oldValue} to ${newValue}`)
    }
  },
  mounted() {
    console.log('Vue app has been mounted to the DOM')
  }
})

app.mount('#app')
</script>

In the above code, we use the :class directive to dynamically bind the CSS class of the li element according to the activation state of the tab in order to set the style of the tab. In addition, we also use the watch attribute to monitor changes in activeTabIndex and output the change information on the console. Finally, we use the mounted lifecycle hook function to ensure that the Vue application has been successfully mounted on the DOM.

Now, we have completed a complete Vue.js 3 tab component example. Through studying this article, we should have understood the commonly used syntax and concepts of Vue.js, including: instructions, data properties, calculated properties, life cycle hooks, etc.

Of course, this article is just the tip of the iceberg of Vue.js. In future studies, we should pay more attention to routing, state management, plug-ins, etc. I hope this article will be helpful to developers and enthusiasts who are planning to learn Vue.js 3.

The above is the detailed content of VUE3 quick start: using Vue.js instructions to switch tabs. For more information, please follow other related articles on the PHP Chinese website!