Asas pembangunan VUE3: menggunakan pemalam Vue.js untuk merangkum komponen berorientasikan objek

Dengan pembangunan berterusan teknologi pembangunan bahagian hadapan, Vue.js, sebagai rangka kerja Javascript yang ringan, semakin digemari oleh pembangun. Dalam versi baharu Vue.js, Vue3, beberapa ciri dan penambahbaikan baharu telah ditambah, seperti API Komposisi dan sokongan TypeScript yang lebih baik. Artikel ini akan menumpukan pada cara menggunakan pemalam Vue.js untuk merangkum komponen berorientasikan objek untuk membantu pemula bermula dengan lebih baik dengan pembangunan Vue3.

Apakah pemalam Vue.js?

Pertama sekali, kita perlu menjelaskan apa itu pemalam Vue.js. Pemalam Vue.js ialah pemalam contoh Vue yang boleh digunakan semula yang boleh membantu kami melaksanakan beberapa komponen dan modul tambahan dengan fungsi yang kompleks Pada masa yang sama, pemalam ini juga boleh dirangkumkan ke dalam pustaka komponen Vue.js untuk mudah digunakan semula dalam projek yang berbeza.

Pemalam Vue.js terdiri daripada objek JavaScript, biasanya termasuk kaedah pemasangan, yang menerima pembina Vue sebagai parameter pertama dan parameter pilihan. Setelah pemalam dipasang, kami boleh menggunakannya dalam mana-mana contoh Vue.

Bagaimana untuk merangkum komponen berorientasikan objek?

Seterusnya, kami akan memperkenalkan langkah demi langkah cara merangkum komponen berorientasikan objek. Kami akan mengambil komponen butang mudah sebagai contoh untuk menggambarkan cara menggunakan pemalam Vue.js untuk merangkum komponen berorientasikan objek.

Langkah 1: Buat kelas komponen

Kita perlu mencipta kelas komponen berorientasikan objek untuk menulis kod logik komponen butang. Kelas komponen biasanya termasuk bahagian berikut:

• Pembina: digunakan untuk memulakan beberapa pembolehubah dan data komponen, serta menetapkan gaya komponen, dsb.
• kaedah pemaparan: digunakan untuk memaparkan kandungan komponen, termasuk templat dan gaya HTML, dsb.
• Fungsi cangkuk kitaran hayat: digunakan untuk mengendalikan peristiwa kitaran hayat yang berbeza bagi komponen, seperti dipasang, dikemas kini, beforeDestroy, dsb.

Berikut ialah contoh kod untuk kelas komponen butang ringkas:

class MyButton {
  constructor(options = {}) {
    this.text = options.text || 'Submit';
    this.type = options.type || 'primary';
    this.id = options.id || 'my-button';
  }

  render() {
    const button = document.createElement('button');
    button.setAttribute('id', this.id);
    button.classList.add('btn', `btn-${this.type}`);
    button.textContent = this.text;
    return button;
  }

  mounted() {
    console.log('MyButton mounted');
  }

  beforeDestroy() {
    console.log('MyButton beforeDestroy');
  }
}

Langkah 2: Buat pemalam Vue

Seterusnya, kita perlu menambah kelas komponen butang Dikapsulkan ke dalam pemalam Vue.js. Kita boleh mencapai ini menggunakan kaedah Vue.extend(), yang menerima objek pilihan komponen dan mengembalikan pembina komponen Vue yang boleh diguna semula.

Berikut ialah contoh kod cara merangkum kelas komponen butang ke dalam pemalam Vue.js:

const MyButtonPlugin = {
  install(Vue) {
    Vue.prototype.$myButton = Vue.component('my-button', Vue.extend(new MyButton()));
  }
};

Dalam kod sampel di atas, kami membuat instantiate kelas komponen butang dan menyerahkannya kepada Kaedah Vue.extend () dan kemudian panggil kaedah Vue.component() untuk mencipta pembina komponen Vue yang boleh diguna semula. Seterusnya, kami menjadikan pembina komponen sebagai sifat contoh Vue untuk digunakan dalam komponen.

Langkah 3: Gunakan pemalam Vue

Akhir sekali, kita boleh menggunakan komponen butang tersuai dalam aplikasi Vue. Kami hanya perlu memanggil kaedah MyButtonPlugin.install() dalam contoh Vue untuk mendaftarkan komponen sebagai komponen global. Kemudian, kita boleh menggunakan komponen dalam templat Vue.

Berikut ialah contoh kod tentang cara membuat komponen butang tersuai menggunakan pemalam Vue:

const app = createApp({});
app.use(MyButtonPlugin);

app.component('my-button', {
  template: '<div><$myButton></$myButton></div>'
});

app.mount('#app');

Dalam kod sampel di atas, kami mula-mula mencipta contoh Vue dan menggunakan pemalam MyButtonPlugin. Seterusnya, kami memanggil kaedah app.component() untuk mencipta komponen butang tersuai dan menggunakan templat komponen untuk memaparkan kandungan komponen. Akhir sekali, kami melekapkan contoh Vue ke nod DOM yang ditentukan.

Ringkasan

Melalui langkah di atas, kami berjaya merangkum komponen butang berorientasikan objek ke dalam pemalam Vue.js dan mendaftarkannya sebagai komponen global. Komponen ini boleh digunakan semula dalam aplikasi Vue dan boleh dilanjutkan dengan lebih banyak fungsi dan gaya.

Melalui artikel ini, kami mempelajari cara menggunakan pemalam Vue.js untuk merangkum komponen berorientasikan objek, yang merupakan langkah yang sangat penting dalam pembangunan Vue3. Saya harap artikel ini dapat membantu pemula lebih memahami dan bermula dengan pembangunan Vue3.

Atas ialah kandungan terperinci Asas pembangunan VUE3: menggunakan pemalam Vue.js untuk merangkum komponen berorientasikan objek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!