Cara Membuat Aplikasi TodoList Vue JS Part 1

Pada artikel ini kita akan mulai Membuat Aplikasi TodosList dengan menggunakan Vue JS dan saya harap teman teman disini sudah mengenal sintaks sintaks dasar dari VueJS -nya. Yang pertama saya sudah punya template HTML sederhana dan juga sudah meload file VueJS -nya dan file CSS Bootstrap sebagai design layoutnya. Jadi silahkan teman teman siapkan terlebih dahulu apa saja yang di butuhkan

Membuat-Aplikasi-TodoList-Vue-JS-Part1-24-07-2017-1

Lalu berikutnya untuk tag htmlnya saya buat satu buah elemen <div> dengan id app

Membuat-Aplikasi-TodoList-Vue-JS-Part1-24-07-2017-2

Nah untuk menjalankan aplikasi dari VueJS -nya kita akan buat script baru seperti biasa kita akan membuat Object Vue dengan menuliskan sebagai berikut

Membuat-Aplikasi-TodoList-Vue-JS-Part1-24-07-2017-3

Yang pertama kita akan memberitahu ke Objectnya kalo #app ini adalah sebagai tempat untuk menjalankan fungsi-fungsi dari Vue JSnya

Membuat-Aplikasi-TodoList-Vue-JS-Part1-24-07-2017-4

dan berikutnya kita butuh data. Data apa saja si yang kita butuhkan ? Tentu kita butuh daftar list todosnya sebagai Array Object yang terdiri dari pasangan key dan value 

Membuat-Aplikasi-TodoList-Vue-JS-Part1-24-07-2017-5

Lalu kita buat satu property lagi dengan nama is_completed bertipe boolean nilai defaultnya adalah false yang dimana property tersebut untuk menentukan kapan tugasnya selesai atau belum dan yang terakhir adalah nama property newTodo yang nilainya yaitu string kosong seperti ini

Membuat-Aplikasi-TodoList-Vue-JS-Part1-24-07-2017-6

Tentu property yang dibuat terdiri dari pasangan key dan value yang kita pisahkan tanda koma untuk memisahkan antara property satu ke property lainnya. Langkah pertama kita sudah berhasil mulai dari membuat struktur HTML, load file Vue dan mendeklarasikan property-property dari Object Vuenya. Tentu itu semua yang kita butuhkan untuk memulai persiapan dalam membuat Aplikasi TodoList dengan Vue JS. Terima Kasih

24 Juli 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat