Démarrage rapide de VUE3 : utiliser les instructions de Vue.js pour changer d'onglet

Cet article vise à aider les débutants à démarrer rapidement avec Vue.js 3 et à obtenir un simple effet de changement d'onglet. Vue.js est un framework JavaScript populaire qui peut être utilisé pour créer des composants réutilisables, gérer facilement l'état de votre application et gérer les interactions de l'interface utilisateur. Vue.js 3 est la dernière version du framework Par rapport aux versions précédentes, il a subi des changements majeurs, mais les principes de base n'ont pas changé. Dans cet article, nous utiliserons les instructions de Vue.js pour implémenter l'effet de changement d'onglet, dans le but de familiariser les lecteurs avec la syntaxe et les concepts courants de Vue.js.

Dans la première étape, nous devons créer une instance Vue, puis la monter sur un élément DOM de la page HTML. Dans Vue.js 3, la façon de créer une instance Vue est similaire à Vue.js 2, il suffit de passer un objet en paramètre. Nous devons également déclarer une propriété de données tabs dans l'instance Vue, qui contiendra le titre et le contenu de l'onglet.

<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>

Dans le code ci-dessus, nous utilisons la directive v-for pour parcourir le tableau des onglets de boucle, utilisons la directive :key pour définir un identifiant unique pour chaque élément, et la directive @click lie l'événement click de l'onglet, When un onglet est cliqué, sa valeur d'index est affectée à la propriété de données activeTabIndex. En même temps, utilisez la commande v-show pour afficher ou masquer le contenu de l'onglet correspondant en fonction de la valeur de activeTabIndex.

Maintenant, nous avons créé avec succès l'instance Vue et l'avons montée sur la page HTML. Ensuite, nous devons écrire des styles pour améliorer l'apparence de l'onglet.

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

Dans le style ci-dessus, nous avons défini certains styles de base pour la liste d'onglets et le bloc de contenu des onglets, tels que la couleur d'arrière-plan, la bordure, le remplissage, etc. De plus, nous avons également défini les styles :hover et .active pour l'élément li de l'onglet. Lorsque la souris survole l'onglet, la couleur d'arrière-plan changera ; lorsque l'onglet est actif, la couleur d'arrière-plan deviendra blanche.

À ce stade, nous avons terminé la disposition et le style de base de l'onglet. Enfin, nous devrions effectuer quelques derniers travaux dans l'instance Vue pour garantir que le changement d'onglet est fluide et 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>

Dans le code ci-dessus, nous utilisons la directive :class pour lier dynamiquement la classe CSS de l'élément li en fonction de l'état d'activation de l'onglet afin de styliser l'onglet. De plus, nous utilisons également l'attribut watch pour surveiller les modifications dans activeTabIndex et afficher les informations sur les modifications sur la console. Enfin, nous utilisons la fonction hook de cycle de vie montée pour garantir que l'application Vue a été montée avec succès sur le DOM.

Maintenant, nous avons réalisé un exemple complet de composant d'onglet Vue.js 3. En étudiant cet article, nous devrions déjà comprendre la syntaxe et les concepts couramment utilisés de Vue.js, notamment : les instructions, les propriétés des données, les propriétés calculées, les hooks de cycle de vie, etc.

Bien sûr, cet article n'est que la pointe de l'iceberg de Vue.js. Dans les études futures, nous devrions accorder plus d'attention au routage, à la gestion des états, aux plug-ins, etc. J'espère que cet article sera utile aux développeurs et aux passionnés qui envisagent d'apprendre Vue.js 3.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!