VueJS 5

A. Development Tools (Vue.js)
1. Untuk mengembangkan aplikasi berbasis Vue sebenarnya hanya dibutuhkan code editor untuk menulis kode programnya, serta web browser untuk menampilkan hasilnya.
2. Tidak ada pilihan spesifik, silahkan gunakan code editor yang diinginkan, seperti : Sublime, Visual Studio Code, Netbeans, Notepad++, Intelij Idea, dsb.
3. Untuk web browser pun juga bebas, bisa menggunakan Google Chrome, Mozilla Firefox, Safari, bahkan Microsoft IE (versi 9 atau later).

Component 1

Component 2

Component 3

Component 4

Component 5

Component 6

Component 7

Component 8

Component 9

Component 10

Read More

VueJS 4

A. Development Tools (Vue.js)
1. Untuk mengembangkan aplikasi berbasis Vue sebenarnya hanya dibutuhkan code editor untuk menulis kode programnya, serta web browser untuk menampilkan hasilnya.
2. Tidak ada pilihan spesifik, silahkan gunakan code editor yang diinginkan, seperti : Sublime, Visual Studio Code, Netbeans, Notepad++, Intelij Idea, dsb.
3. Untuk web browser pun juga bebas, bisa menggunakan Google Chrome, Mozilla Firefox, Safari, bahkan Microsoft IE (versi 9 atau later).

1. Buatlah form input data penjualan onlinshop yang menggunakan semua tipe inputan, kemudian pada form tersebut, tampilkan setiap data yang diketik atau dipilih, dan lakukan simulasi pengiriman data ke server.

2. Hasil

3. Buatlah sebuah list dalam bentuk table yang menampilkan data produk onlineshop, lengkap dengan gambar dan desain template yang bagus, kemudian tambahkan filtering yang bisa memfilter data yang di tampilkan.

4. Hasil

Read More

VueJS 3

A. Development Tools (Vue.js)
1. Untuk mengembangkan aplikasi berbasis Vue sebenarnya hanya dibutuhkan code editor untuk menulis kode programnya, serta web browser untuk menampilkan hasilnya.
2. Tidak ada pilihan spesifik, silahkan gunakan code editor yang diinginkan, seperti : Sublime, Visual Studio Code, Netbeans, Notepad++, Intelij Idea, dsb.
3. Untuk web browser pun juga bebas, bisa menggunakan Google Chrome, Mozilla Firefox, Safari, bahkan Microsoft IE (versi 9 atau later).

1. Buatlah penerapan berbagai macam directive

2. Hasil

3. Buatlah sebuah list dalam bentuk collection yang menampilkan data produk onlineshop

4. Hasil

Read More

VueJS 2

A. Development Tools (Vue.js)
1. Untuk mengembangkan aplikasi berbasis Vue sebenarnya hanya dibutuhkan code editor untuk menulis kode programnya, serta web browser untuk menampilkan hasilnya.
2. Tidak ada pilihan spesifik, silahkan gunakan code editor yang diinginkan, seperti : Sublime, Visual Studio Code, Netbeans, Notepad++, Intelij Idea, dsb.
3. Untuk web browser pun juga bebas, bisa menggunakan Google Chrome, Mozilla Firefox, Safari, bahkan Microsoft IE (versi 9 atau later).


1. Buatlah penerapan siklus object vue dengan studi kasus lain yang berbeda dari contoh.

2. Hasil

3.  Buatlah template vue sederhana yang menggabungkan property template, data raw dan data attribute.

4. Hasil

5. Buatlah kalkulator sederhana yang memiliki inputan nilai 1 dan nilai 2, dengan 4 tombol perhitungan (tambah, kurang, kali, bagi). Ketika nilai telah diinput dan tombol di klik, tampilkan hasilnya.

6. Hasil

Read More

VueJS

A. Development Tools (Vue.js)
1. Untuk mengembangkan aplikasi berbasis Vue sebenarnya hanya dibutuhkan code editor untuk menulis kode programnya, serta web browser untuk menampilkan hasilnya.
2. Tidak ada pilihan spesifik, silahkan gunakan code editor yang diinginkan, seperti : Sublime, Visual Studio Code, Netbeans, Notepad++, Intelij Idea, dsb.
3. Untuk web browser pun juga bebas, bisa menggunakan Google Chrome, Mozilla Firefox, Safari, bahkan Microsoft IE (versi 9 atau later).


B. Instalasi & Konfigurasi (Vue.js)
1. Sebagai sebuah library Javascript, maka kita perlu menambahkannya ke dalam halaman HTML sebelum menggunakaannya. Untuk melihat versi terbaru dan sebelumnya, silahkan cek pada tautan berikut https://github.com/vuejs/vue/releases.

2. Library Vue terbagi menjadi dua, yaitu mode development (filenya tidak dikompres) dan mode production (file dikompres). Sangat disarankan menggunakan mode development saat mengembangkan aplikasi menggunakan Vue karena semua informasi umum (warning) jika terjadi kesalahan kode akan dimunculkan.

3. File Vue yang akan ditambahkan ke dalam halaman HTML bisa diunduh ke lokal (sehingga tidak membutuhkan koneksi internet) atau ditautkan langsung dengan server library Vue (CDN). Kita bisa mengunduh pustaka Vue versi development pada tautan berikut https://vuejs.org/js/vue.js , Adapun versi production bisa kita lihat pada tautan berikut ini https://vuejs.org/js/vue.min.js.

4. Buatlah struktur folder seperti berikut.

5. Copy code dari link berikut https://vuejs.org/js/vue.js, kemudian paste pada file lib/vue.js

6. Sebagaimana umumnya library javascript, untuk menambahkan ke halaman HTML maka cukup dengan kode berikut :

<script src="lib/vue.js"></script>

7. Kemudian coba dengan code berikut.

8. Kemudian jalankan kode tersebut pada browser. Kode di atas akan menghasilkan tampilan seperti ini.

C. Penjelasan Kode

1. Pada contoh di atas memang tidak ada kelebihannya, bahkan tidak disarankan untuk menggunakan kode ini jika hanya untuk menampilkan teks statis pada browser. Namun dari kode sederhana ini, kita akan belajar tentang bagaimana Vue tersebut bekerja.

2. Pertama, kita butuh HTML untuk menjalankan kode-kode Vue, karena Vue hanyalah sebuah library Javascript yang tugasnya memanipulasi tampilan HTML.

3. Kedua, Kita perlu menambahkan (include) library Vue ke HTML sebagaimana yang telah dijelaskan pada bagian Instalasi karena Vue merupakan library Javascript.

4. Ketiga, Kita perlu membuat kontainer (mount point) berupa elemen HTML, untuk menandai bahwa di dalam elemen tersebut nantinya hasil kompilasi Vue akan ditampilkan atau dimuat. Sebagai penanda, kita perlu tambahkan

atribut id pada tag tersebut yang nantinya akan didefinisikan pada saat inisiasi objek Vue.

5. Keempat, Kita perlu menggunakan double kurung kurawal untuk menandai bahwa teks tersebut merupakan variabel yang akan dimanipulasi oleh Vue, model seperti ini telah umum digunakan diberbagai template engine.

6. Kelima, Kita perlu membuat instance/objek baru untuk class Vue, yang tentunya ditulis dengan menggunakan Javascript.

Objek Vue yang dibuat ini disimpan ke dalam variabel bernama vm (nama bebas) untuk memudahkan kita nantinya dalam mengakses objek ini. Objek Vue pada kode di atas menggunakan dua properti yaitu el dan data. Properti el menunjukkan id dari elemen HTML yang akan dijadikan sebagai target atau tempat ditampilkannya hasil manipulasi data dan template.

7. Properti berikutnya adalah data yang berbentuk objek, dimana di dalamnya terdapat key message dengan nilai ‘Hello world!’ yang merupakan representasi dari variabel. Key atau variabel dalam properti data inilah yang akan mengubah kode template {{ message }} menjadi teks “Hello world!”. Dengan kata lain, jika kita mengubah nilai dari variabel message ini menjadi misalnya “Hello Vuejs!” maka tentu tampilan yang kita lihat pada browser juga akan berubah sesuai teks tersebut.

D.Kesimpulan
Kesimpulannya bahwa vue.js menjadi framework java script yang tergolong mudah digunakan dan dijadikan pilihan bagi para pengembang pemula javascript

Read More