Cara menggunakan Vue untuk melaksanakan kesan bar sisi

Cara menggunakan Vue untuk melaksanakan kesan bar sisi

Vue ialah rangka kerja JavaScript yang popular Kesederhanaan dan fleksibilitinya membolehkan pembangun membina aplikasi satu halaman interaktif dengan cepat. Dalam artikel ini, kami akan mempelajari cara menggunakan Vue untuk melaksanakan kesan bar sisi biasa dan memberikan contoh kod khusus untuk membantu kami memahami dengan lebih baik.

1. Buat Projek Vue

Pertama, kita perlu mencipta projek Vue. Anda boleh menggunakan Vue CLI (antara muka baris arahan) yang disediakan oleh Vue, yang boleh menjana struktur projek asas Vue dengan cepat.

Buka terminal dan masukkan arahan berikut dalam direktori tempat projek terletak:

$ vue create sidebar-animation

Kemudian ikut arahan untuk memilih konfigurasi yang diperlukan.

2. Buat komponen

Seterusnya, kita perlu mencipta dua komponen, satu komponen sidebar dan satu lagi komponen kandungan utama.

Buat dua fail dalam folder src: Sidebar.vue dan MainContent.vue.

Kod sidebar.vue:

<template>
  <div class="sidebar">
    <ul>
      <li v-for="item in menuItems" :key="item.id" @click="selectItem(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: "Home" },
        { id: 2, name: "About" },
        { id: 3, name: "Contact" },
      ],
    };
  },
  methods: {
    selectItem(item) {
      // 在这里可以触发对应的路由跳转或者显示相应的内容
      console.log(item.name);
    },
  },
};
</script>

<style scoped>
.sidebar {
  width: 200px;
  height: 100vh;
  background-color: #f0f0f0;
  padding: 10px;
}

ul {
  list-style-type: none;
}

li {
  margin-bottom: 10px;
  cursor: pointer;
}
</style>

Kod MainContent.vue:

<template>
  <div class="main-content">
    <h1 id="selectedItem">{{ selectedItem }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: "",
    };
  },
};
</script>

<style scoped>
.main-content {
  padding: 10px;
}
</style>

Di sini, kami telah mencipta komponen bar sisi yang ringkas dan komponen kandungan utama. Tatasusunan item menu ditakrifkan dalam komponen bar sisi dan dijadikan elemen li melalui arahan v-for. Apabila setiap item menu diklik, kaedah selectItem dicetuskan melalui acara klik terikat dan item menu yang dipilih diluluskan. Nama item menu yang dipilih dipaparkan dalam komponen kandungan utama.

3. Menggunakan komponen

Gunakan dua komponen yang baru anda buat dalam App.vue.

<template>
  <div id="app">
    <Sidebar />
    <MainContent />
  </div>
</template>

<script>
import Sidebar from "./components/Sidebar.vue";
import MainContent from "./components/MainContent.vue";

export default {
  components: {
    Sidebar,
    MainContent,
  },
};
</script>

<style>
#app {
  display: flex;
  height: 100vh;
}
</style>

Di sini kami memperkenalkan kedua-dua komponen Sidebar dan komponen MainContent dan menggunakan kedua-dua komponen ini dalam templat.

4. Jalankan projek

Selepas melengkapkan langkah di atas, kita boleh menjalankan arahan berikut dalam terminal untuk memulakan projek:

$ npm run serve

Kemudian, buka http://localhost:8080 dalam penyemak imbas, anda boleh melihat tetingkap dengan halaman kesan Lajur sisi.

Kesimpulan

Melalui artikel ini, kami mempelajari cara menggunakan Vue untuk melaksanakan kesan khas bar sisi. Kami mencipta komponen bar sisi dan komponen kandungan utama, dan menggunakan pengikatan data dan pengikatan peristiwa Vue untuk melaksanakan komunikasi antara komponen. Pada masa yang sama, kami juga menyediakan contoh kod khusus untuk membantu pembaca memahami dan menggunakan Vue dengan lebih baik. Saya harap artikel ini dapat membantu anda dan membolehkan anda menggunakan Vue dengan lebih baik untuk membina aplikasi web.

Atas ialah kandungan terperinci Cara menggunakan Vue untuk melaksanakan kesan bar sisi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!