Permulaan pantas VUE3: menggunakan arahan Vue.js untuk menukar tab

Artikel ini bertujuan untuk membantu pemula memulakan dengan cepat dengan Vue.js 3 dan mencapai kesan penukaran tab yang mudah. Vue.js ialah rangka kerja JavaScript popular yang boleh digunakan untuk membina komponen boleh guna semula, mengurus keadaan aplikasi anda dengan mudah dan mengendalikan interaksi antara muka pengguna. Vue.js 3 ialah versi terkini rangka kerja Berbanding dengan versi sebelumnya, ia telah mengalami perubahan besar, tetapi prinsip asas tidak berubah. Dalam artikel ini, kami akan menggunakan arahan Vue.js untuk melaksanakan kesan penukaran tab, dengan tujuan menjadikan pembaca biasa dengan sintaks dan konsep biasa Vue.js.

Dalam langkah pertama, kita perlu mencipta tika Vue dan kemudian melekapkannya pada elemen DOM pada halaman HTML. Dalam Vue.js 3, cara untuk mencipta tika Vue adalah serupa dengan Vue.js 2, cuma lulus objek sebagai parameter. Kami juga perlu mengisytiharkan tab sifat data dalam contoh Vue, yang akan mengandungi tajuk dan kandungan tab.

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

Dalam kod di atas, kami menggunakan arahan v-for untuk menggelung melalui tatasusunan tab, arahan :key untuk menetapkan pengecam unik bagi setiap elemen dan arahan @click untuk mengikat tab peristiwa, apabila tab diklik, nilai indeksnya diberikan kepada sifat data ActiveTabIndex. Pada masa yang sama, gunakan arahan v-show untuk memaparkan atau menyembunyikan kandungan tab yang sepadan mengikut nilai activeTabIndex.

Kini, kami telah berjaya mencipta tika Vue dan memasangnya pada halaman HTML. Seterusnya, kita perlu menulis gaya untuk menambah baik penampilan 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;
}

Dalam gaya di atas, kami menetapkan beberapa gaya asas untuk senarai tab dan blok kandungan tab, seperti warna latar belakang, jidar, pelapik, dsb. Selain itu, kami juga telah mentakrifkan gaya :hover dan .active untuk elemen li tab Apabila tetikus melayang di atas tab, warna latar belakang akan berubah apabila tab aktif, warna latar belakang akan bertukar kepada putih.

Pada ketika ini, kami telah melengkapkan reka letak asas dan gaya tab. Akhir sekali, kita harus melakukan beberapa kerja terakhir dalam contoh Vue untuk memastikan penukaran tab lancar dan betul.

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

Dalam kod di atas, kami menggunakan arahan :class untuk mengikat kelas CSS elemen li secara dinamik mengikut keadaan pengaktifan tab untuk menetapkan gaya tab. Selain itu, kami juga menggunakan atribut jam tangan untuk memantau perubahan dalam activeTabIndex dan mengeluarkan maklumat perubahan pada konsol. Akhir sekali, kami menggunakan fungsi cangkuk kitaran hayat yang dipasang untuk memastikan aplikasi Vue telah berjaya dipasang pada DOM.

Kini, kami telah melengkapkan contoh komponen tab Vue.js 3 yang lengkap. Melalui kajian artikel ini, kita sepatutnya memahami sintaks dan konsep Vue.js yang biasa digunakan, termasuk: arahan, sifat data, sifat terkira, cangkuk kitaran hayat, dsb.

Sudah tentu, artikel ini hanyalah puncak gunung ais Vue.js. Dalam kajian akan datang, kita harus memberi lebih perhatian kepada penghalaan, pengurusan negeri, pemalam, dsb. Saya harap artikel ini akan membantu pembangun dan peminat yang merancang untuk mempelajari Vue.js 3.

Atas ialah kandungan terperinci Permulaan pantas VUE3: menggunakan arahan Vue.js untuk menukar tab. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!