Halo teman-teman pada kesempatan kali ini saya akan melanjutkan kembali Menggunakan Vue.js untuk WordPress-Style Shortcodes. Yang pada part-1 itu kita sudah membahas tentang Ide Shortcodes. Maka kita sekarang akan membahas cara menghidupkan shortcode ke komponen Vue.js.Tujuan dalam membangun aplikasi ini adalah untuk dapat menambahkan kedua tata letak dan konten komponen untuk integrasi Vue.js shortcode kami. Sebagai contoh:

Dalam contoh di atas, baris dan col (UMN) tag merupakan komponen tata letak sedangkan produk-daftar dan produk-kartu akan berubah menjadi komponen konten.

Karena Vue.js adalah menciptakan komponen baru dan memperluas kosakata HTML, saya pikir kita akan menggunakan komponen Vue kami langsung. Namun, aplikasi kita sedang membangun berlebihan menargetkan pengguna di komunitas WordPress. Oleh karena itu, saya ingin mencoba pendekatan ini.

Pada dasarnya ini adalah langkah-langkah kita perlu melalui:

  • Mengkonversi string kita dapatkan dari backend ke beberapa struktur data lain sehingga kita dapat mengubah tata letak dan konten.
  • Mencari tahu bagaimana kita dapat memetakan kode untuk komponen kami, seperti productlist atau ProductCard.
  • Mencari tahu bagaimana menggunakan Vue.js untuk membangun komponen baru yang dapat komponen instantiate.

Pada Part berikutinya berarti part-3 kita akan langsung mendemonsrasikannya ya teman-teman. Semoga bermanfaat.