Tutorial Bermula VUE3: Menggunakan pemalam Vue.js untuk merangkum komponen garis masa

Vue.js ialah rangka kerja JavaScript yang sangat popular yang digunakan secara meluas dalam pembangunan bahagian hadapan. Dengan pembangunan berterusan Vue.js, versi baharu VUE3 juga telah dilancarkan satu demi satu. Artikel ini akan memperkenalkan tutorial pengenalan tentang cara menggunakan pemalam Vue.js untuk merangkum komponen garis masa.

Pertama, kita perlu memahami struktur asas komponen garis masa. Komponen garis masa boleh digunakan untuk memaparkan acara sepanjang tempoh masa, termasuk masa dan kandungan acara. Secara amnya, garis masa disusun mengikut urutan peristiwa berlaku, membolehkan pengguna memahami dengan lebih intuitif hubungan antara peristiwa pada garis masa. Di sini, kami akan menggunakan Vue.js untuk melaksanakan fungsi ini.

Seterusnya, kita perlu memasang Vue.js. Anda boleh melengkapkan pemasangan dalam baris arahan dengan arahan berikut:

npm install vue

Selepas pemasangan selesai, kita boleh mula membina komponen garis masa. Pertama, kita perlu mencipta komponen Vue.js. Dalam komponen ini kita perlu menentukan data dan kaedah.

Dalam komponen, kita perlu menentukan objek data untuk menyimpan data komponen. Objek data ini boleh termasuk banyak atribut, seperti masa, perihalan acara, dsb. Di sini kami hanya mentakrifkan lima atribut:

data() {
  return {
    events: [
      { time: "2022-01-01", event: "New Year's Day" },
      { time: "2022-02-12", event: "Chinese New Year" },
      { time: "2022-04-15", event: "Tax Day" },
      { time: "2022-05-09", event: "Mother's Day" },
      { time: "2022-06-20", event: "Father's Day" }
    ]
  }
}

Dalam objek data ini, kami menggunakan tatasusunan acara untuk menyimpan acara. Setiap elemen dalam tatasusunan termasuk dua atribut: masa dan peristiwa. Atribut masa menunjukkan masa apabila peristiwa itu berlaku, dan atribut peristiwa menunjukkan kandungan peristiwa tertentu.

Seterusnya, kita perlu menentukan kaedah untuk memaparkan struktur HTML garis masa dalam komponen Vue.js. Dalam kaedah ini, kami mengulangi tatasusunan acara dan menjana elemen HTML untuk setiap acara. Di sini kami menggunakan sintaks templat Vue.js untuk mencipta dan mengemas kini elemen DOM.

methods: {
  renderTimeline() {
    return this.events.map(event => {
      return `<div>
                <div class="time">${event.time}</div>
                <div class="event">${event.event}</div>
              </div>`
    }).join('')
  }
}

Dalam kaedah ini, kami menggunakan kaedah peta untuk merentasi tatasusunan peristiwa. Untuk setiap elemen dalam tatasusunan, kami mencipta elemen div yang mengandungi masa dan acara dan menggabungkannya menjadi rentetan. Akhir sekali, kami menggunakan kaedah gabungan untuk menggabungkan semua rentetan ke dalam rentetan HTML dan mengembalikannya.

Kini kami telah menyelesaikan kebanyakan pembinaan komponen garis masa. Untuk menggunakan komponen ini dengan lebih mudah, kita perlu menggunakan pemalam Vue.js untuk merangkumnya. Berikut ialah struktur pemalam garis masa asas:

const TimelinePlugin = {
  install(Vue) {
    Vue.component('timeline', {
      data() {},
      methods: {},
      template: `<div class="timeline-container">{{renderTimeline()}}</div>`
    })
  }
}

Dalam pemalam ini, kami menggunakan dua bahagian utama: pemalam dan komponen. Pemalam ialah modul berfungsi yang boleh didaftarkan dan dipasang dalam contoh Vue.js. Di sini, kami menggunakan kaedah pemasangan Vue.js untuk memasang pemalam ini. Kaedah ini perlu menerima Vue.js sebagai parameter dan mendaftarkan komponen kami sebagai komponen global. Komponen

ialah komponen garis masa yang kami takrifkan. Di sini, kami menulis data, kaedah dan templat yang kami takrifkan sebelum ini dalam Vue.component dan mendaftarkannya sebagai komponen garis masa. Akhir sekali, kami sambungkannya ke dalam bekas div dengan bekas garis masa kelas.

Seterusnya, kami perlu mengimport pemalam ini ke dalam aplikasi Vue.js kami. Anda boleh melakukannya seperti ini dalam main.js:

import Vue from 'vue'
import TimelinePlugin from './timeline-plugin.js'

Vue.use(TimelinePlugin)

new Vue({ 
  el: '#app'
})

Dalam main.js, kami menggunakan pernyataan import untuk mengimport pemalam TimelinePlugin ke dalam aplikasi kami. Kemudian, kami menggunakan kaedah penggunaan Vue.js untuk memasang pemalam. Akhir sekali, kami mencipta tika Vue.js dan mengikatnya pada elemen DOM dengan id #app.

Akhir sekali, kita perlu mencipta elemen DOM dalam fail html untuk memaparkan komponen garis masa. Anda boleh melakukan ini:

<html>
  ...
  <body>
    <div id="app">
      <timeline></timeline>
    </div>
    <script src="js/main.js"></script>
  </body>
</html>

Dalam contoh HTML ini, kami mencipta bekas div dengan id #app dan memasukkan komponen garis masa ke dalamnya. Akhir sekali, kami menetapkan fail main.js sebagai fail skrip halaman dan mengimportnya ke dalam html.

Kini, kami telah melengkapkan komponen garis masa asas dan membungkusnya sebagai pemalam Vue.js. Anda boleh menggunakannya dengan mudah dalam aplikasi Vue.js. Jika anda ingin mengetahui lebih lanjut tentang cara Vue.js dan VUE3 berfungsi, lihat dokumentasi yang berkaitan.

Atas ialah kandungan terperinci Tutorial Bermula VUE3: Menggunakan pemalam Vue.js untuk merangkum komponen garis masa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!