Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaan sehat, masi semangat belajarnya? kali ini materi kita tentang vue js, kali ini kita akan belajar menampilkan Todo List pada vue js, untuk lebih jelasnya kita langsung saja praktekan ya teman-teman.

Sebelum saya praktekan teman-teman bisa terlebih dahulu mendownload liblary dari vue js yang bisa langsung teman-teman download di website resmi vue js yaitu vuejs.org, nah untuk teknik loadnya bebas teman-teman bisa langsung download atau mau memanggil liblarynya dengan link.

Oke langkah pertama, silahkan teman-teman buat sebuah file html dan ketikan script berikut ini:

Script diatas saya mereload library dari vue js secara online atau lewat CDN, nah didalam body saya membuat sebuah element ol dan satu buat li yang dimana li ini akan kita isi dengan list-list data, oke sekarang kita beralih pada script vue js nya, silahakan teman-teman tambahkan script sebagai berikut ini:

Script diatas menjelaskan saya membuat sebuah variable app dengan memulai syntak vue js nya dengan new vue, lalu didalamnya saya menempatkan key el dengan nilai #list yang berarti element dengan id list akan saya pilih, lalu saya membuat sebuah key data didalamnya terdapat 3 nilai todos dengan key text dan nilai yang berbeda-beda, jika teman-teman save maka hasilnya akan seperti berikut ini:

menampilkan Todo List pada vue js

3 list yang kita buat akan tercetak didalam li dengan catatan didalam li kita berikan atribut v-for dengan nilai todo in todos.

Oke teman-teman cukup sekian dulu tutorial kali ini, semoga bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya, terimakasih.