Vue.

js
Fundamental
PENS - 26 Juli 2020
 Hai, saya Jefry Dewangga 👋
Associate Software Development Engineer @ DANA Indonesia
Kontributor Komunitas Vue.js Indonesia
Informatika PENS 2016
@jefrydco

@jefrydco
 Lisensi untuk Konten

Atribusi-Non-Komersial-Berbagi-Serupa 4.0 Internasional (CC BY-NC-SA 4.0)

Berbagi — menyalin dan menyebarluaskan kembali materi ini dalam
bentuk atau format apapun;
Adaptasi — menggubah, mengubah, dan membuat turunan dari materi
ini

Dengan Ketentuan

Atribusi — Anda harus mencantumkan nama yang sesuai,

mencantumkan tautan terhadap lisensi, dan menyatakan bahwa telah
ada perubahan yang dilakukan.
Non-Komersial — Anda tidak dapat menggunakan materi ini untuk
kepentingan komersial.
Berbagi Serupa — Apabila Anda menggubah, mengubah, atau
membuat turunan dari materi ini, Anda harus menyebarluaskan
kontribusi Anda di bawah lisensi yang sama dengan materi asli.

Lebih Lanjut: https://creativecommons.org/licenses/by-nc-sa/4.0/deed.id

@jefrydco
 Lisensi untuk Kode

MIT
Hak Cipta (C) 2020 Jefry Dewangga

Dengan ini diberikan izin, bebas biaya, kepada siapa saja yang memperoleh salinan perangkat lunak ini dan file dokumentasi terkait (
"Perangkat Lunak"), untuk memanfaatkan Perangkat Lunak tanpa pembatasan, termasuk tanpa batasan hak untuk menggunakan, menyalin,
memodifikasi, menggabungkan , mempublikasikan, mendistribusikan, mensublisensikan, dan / atau menjual salinan Perangkat Lunak, dan
untuk mengizinkan orang yang diberi Perangkat Lunak ini untuk melakukannya, asalkan tunduk pada persyaratan berikut:

Pemberitahuan hak cipta di atas dan pemberitahuan izin ini harus dimasukkan dalam semua salinan atau bagian substansial dari Perangkat
Lunak.

PERANGKAT LUNAK INI DISEDIAKAN "APA ADANYA", TANPA JAMINAN APAPUN, TERSURAT MAUPUN TERSIRAT, TERMASUK NAMUN TIDAK
TERBATAS PADA JAMINAN DIPERDAGANGKAN, KESESUAIAN UNTUK TUJUAN TERTENTU DAN PELANGGARAN. DALAM KEADAAN APAPUN
PENULIS ATAU HAK CIPTA PEMEGANG BERTANGGUNG JAWAB ATAS KLAIM, KERUSAKAN ATAU KEWAJIBAN LAIN, BAIK DALAM TINDAKAN
KONTRAK, KESALAHAN ATAU LAINNYA, YANG TIMBUL DARI, ATAU BERHUBUNGAN DENGAN PERANGKAT LUNAK ATAU PENGGUNAAN ATAU
MASALAH LAINNYA DI PERANGKAT LUNAK.

Diterjemahkan oleh: Arie Kurniawan (https://github.com/Lidilidian)

Sumber: https://github.com/steptr/MIT-License/blob/master/MIT_License-id.txt

@jefrydco
 Ingin Bertanya?

sli.do/VUEJS

@jefrydco
 Berbagi Keseruan Webinar

#webinarHIMIT #VueJS #HIMITPENS

@jefrydco
 Topik Vue.js Fundamental

Pengikatan
Definisi Inisialisasi Pengkondisian
Data

Pengikatan
Data Pengikatan
Fungsi Perulangan
2 Arah Peristiwa

Properti Komponen Aplikasi Satu

Siklus Hidup
Penghitung Dasar Halaman

@jefrydco
 Apa itu?

@jefrydco
 bit.ly/survei-web

@jefrydco
@jefrydco
 HTML + CSS + JavaScript HTML + CSS + JavaScript + Vue.js

@jefrydco
 HTML HTML + Vue.js

@jefrydco
 JavaScript JavaScript + Vue.js

@jefrydco
 JavaScript

Inisialisasi penghubung

Inisialisasi data

Deklarasi fungsi/method

Deklarasi pendengar peristiwa

Pemanggilan fungsi

@jefrydco
 JavaScript + Vue.js

Inisialisasi penghubung
Inisialisasi data

Deklarasi fungsi/method

@jefrydco
 Apa itu?

@jefrydco
 Vue.js adalah kerangka kerja JavaScript nan progresif

Sumber Definisi: https://docs.vuejs.id/

@jefrydco
 02
Inisialisasi Vue
(Vue Initialization)

@jefrydco
@jefrydco
 03
Pengikatan Data
(Data Binding)

@jefrydco
 Pengikatan Data 1
Menampilkan Data

@jefrydco
 Pengikatan Data 2
Mengikat Data dengan
Atribut

@jefrydco
 Pengikatan Data 3
Mengikat Data dengan
Atribut untuk Input

@jefrydco
 Pengikatan Data 4
Mengikat Data dengan
Gaya

@jefrydco
 Pengikatan Data 5
Sintaks Ringkas untuk
Atribut

@jefrydco
 04
Pengkondisian
(Conditional)

@jefrydco
 Pengkondisian 1
Menggunakan v-if

@jefrydco
 Pengkondisian 2
Menggunakan v-else

@jefrydco
 Pengkondisian 3
Menggunakan v-else-if

@jefrydco
 Pengkondisian 4
Menggunakan v-show

@jefrydco
 Perbedaan v-if dan v-show

v-if

v-show

@jefrydco
 Kuis

kahoot.it

@jefrydco
 05
Perulangan
(Looping)

@jefrydco
 Perulangan 1
Dasar

@jefrydco
 Perulangan 2
Mendapatkan indeks

@jefrydco
 Perulangan 3
Menggunakan key
(Cukup Disarankan)

@jefrydco
 Perulangan 4
Daftar objek

@jefrydco
 Perulangan 5
Daftar objek menggunakan key
(Sangat Disarankan)

@jefrydco
 Perulangan 6
Daftar Angka

@jefrydco
 Ayo Pindai Segera 😆

DANA Kaget
@jefrydco
 06
Pengikatan Peristiwa
(Event Binding)

@jefrydco
 Pengikatan Peristiwa 1
Mengubah Data - Peristiwa
Klik

@jefrydco
 Pengikatan Peristiwa 2
Mengubah Data - Peristiwa
Kursor di atas elemen

@jefrydco
 Pengikatan Peristiwa 3
Mengubah Data - Peristiwa
Audio

@jefrydco
 Pengikatan Peristiwa 4
Mengubah Data - Sintaks
Ringkas

@jefrydco
 Lebih Banyak Peristiwa

bit.ly/peristiwa-html
@jefrydco
Sumber Gambar: https://math-exercises.com/analysis-of-functions/properties-of-functions

@jefrydco
 07
Fungsi
(Method)

@jefrydco
 Fungsi 1
Dasar

@jefrydco
 Fungsi 2
Parameter

@jefrydco
 Fungsi 3
Parameter Pengikatan
Peristiwa Implisit

bit.ly/objek-peristiwa-html

@jefrydco
 Fungsi 4
Parameter Pengikatan
Peristiwa Eksplisit

@jefrydco
 Fungsi 5
Parameter + Parameter
Pengikatan Peristiwa
Eksplisit

@jefrydco
 08
Pengikatan Data 2 Arah
(Two-way Binding)

@jefrydco
 Pengikatan Data 2 Arah 1
Input Teks

@jefrydco
 Pengikatan Data 2 Arah 2
Area Teks

@jefrydco
 Pengikatan Data 2 Arah 3
Kotak Centang

@jefrydco
 Pengikatan Data 2 Arah 4
Radio

@jefrydco
 Pengikatan Data 2 Arah 5
Pilihan

@jefrydco
 Pengikatan Data 2 Arah 6
Sintaks Ringkas

@jefrydco
 Kuis

kahoot.it

@jefrydco
 09
Properti Penghitung
(Computed Property)

@jefrydco
 Properti Penghitung
(Computed Property)

@jefrydco
 Properti Penghitung 1
Dasar

@jefrydco
 Properti Penghitung 2
Parameter

@jefrydco
 Properti Penghitung 3 - Bagian 1
Fungsi vs Properti Penghitung

@jefrydco
 Properti Penghitung 3 - Bagian 2
Fungsi vs Properti Penghitung

@jefrydco
 10
Komponen Dasar
(Basic Component)

@jefrydco
 Komponen Dasar

@jefrydco
 Komponen Dasar

@jefrydco
 Komponen Dasar 1
Dasar

@jefrydco
 Komponen Dasar 2
Elemen Akar Tunggal (Single Root Element)

Tidak Boleh Boleh

@jefrydco
 Komponen Dasar 3
Atribut Kustom

@jefrydco
 Komponen Dasar 3
Peristiwa Kustom

@jefrydco
Sumber Gambar: https://sites.google.com/site/edu222lifecyclesyoap/day-1

@jefrydco
 11
Siklus Hidup
(Life Cycle)

@jefrydco
 new Vue() beforeCreate(), beforeMount(), destroyed() jarang digunakan

created() dan mounted() biasa digunakan untuk inisialisasi data dan

beforeCreate() mengambil data dari internet

beforeDestroy() biasa digunakan untuk membersihkan memori

created()
beforeUpdate() dan updated() pada umumnya bisa digantikan dengan
beforeMount() properti penghitung atau pengamat

mounted() beforeUpdate()

Tampil di Peramban Menampilkan Ulang

beforeDestroy() updated()

destroyed()
Lebih Lengkap: https://docs.vuejs.id/v2/guide/instance.html#Diagram-Siklus-Hidup

@jefrydco
 Siklus Hidup

@jefrydco
 Ayo Pindai Segera 😆

DANA Kaget
@jefrydco
 12
Membuat Aplikasi Satu Halaman
(Single Page Application)

@jefrydco
 Aplikasi Satu Halaman (Single Page Application) adalah aplikasi web yang
menampilkan data secara dinamis dari internet tanpa harus memuat ulang
peramban

Sumber: https://en.wikipedia.org/wiki/Single-page_application

@jefrydco
@jefrydco
 Kode Sumber Demo

bit.ly/kode-vuejs

@jefrydco
 Belajar Membuat Aplikasi Satu Halaman

Membuat aplikasi web dengan Vue.js menggunakan API:

https://cari-teks-video-api.vercel.app/api/search
Dokumentasi REST API terletak di akhir slide

Ketentuan Penilaian
● Menggunakan penamaan variabel, fungsi dan
komponen yang jelas sesuai dengan kegunaannya
● Menggunakan gaya (style) tampilan se-kreatif
mungkin
● Menggunakan semantik HTML
bit.ly/belajar-vuejs
Batas waktu pengumpulan adalah 8 Agustus 2020

@jefrydco
 Belajar Membuat Aplikasi Satu Halaman

Semua orang yang mengirimkan aplikasi web Vue.js nya

berhak mendapatkan sertifikat dari panitia.

Lima orang yang aplikasi web Vue.js nya paling sesuai

dengan ketentuan penilaian berhak mendapatkan hadiah
dengan ketentuan:

● Satu orang berhak mendapatkan domain .dev

● Dua orang berhak mendapatkan kursus Udemy atau
buku digital di Google Play Book sesuai dengan pilihan
teman-teman
bit.ly/belajar-vuejs ● Tiga orang berhak mendapatkan saldo DANA

@jefrydco
 Belajar Membuat Aplikasi Satu Halaman

Semua aplikasi web Vue.js yang telah dikirimkan akan

ditampilkan pada repositori berikut:
https://github.com/jefrydco/awesome-cari-teks-video

bit.ly/belajar-vuejs

@jefrydco
 Belajar Membuat Aplikasi Satu Halaman

bit.ly/belajar-vuejs
bit.ly/contoh-vuejs

@jefrydco
 Kuis

kahoot.it

@jefrydco
 Pertanyaan yang Sering Diajukan

● Apakah slide materi akan dibagikan?

Ya; bit.ly/slide-vuejs

● Apakah kode sumber contoh/demo akan dibagikan?

Ya; bit.ly/kode-vuejs

● Apakah webinar kali ini ada rekaman ulangnya?

Ya; tautan akan dikirim panitia melalui email/whatsapp

● Apakah semua peserta yang hadir kali ini mendapatkan sertifikat?

Tidak; Peserta yang telah mengisi formulir kehadiran dan mengirimkan aplikasi web Vue.js
yang telah dikerjakan ke bit.ly/belajar-vuejs yang akan mendapatkan sertifikat

@jefrydco
 Pertanyaan yang Sering Diajukan

● Apa prasyarat untuk mempelajari Vue.js?

Cukup HTML, CSS, dan dasar-dasar JavaScript

● Apakah wajib memahami JavaScript untuk menggunakan Vue.js?

Ya; dasar-dasar JavaScript sudah cukup

● Vue.js versi 3 sudah memasuki fase calon rilis (release candidate), versi mana yang harus saya
pelajari?
Versi 2; Vue.js versi 3 memiliki antarmuka pemrograman aplikasi (API) yang sama seperti versi
2

● Apakah wajib memasang Node.js untuk menggunakan Vue.js?

Tidak; HTML, CSS dan JavaScript murni sudah cukup

@jefrydco
 Pertanyaan yang Sering Diajukan

● Apa fungsi Node.js dalam pengembangan aplikasi web Vue.js?

Jika aplikasi sudah cukup besar, kita perlu membaginya menjadi komponen-komponen kecil,
Node.js berguna untuk menyatukan komponen-komponen tersebut

● Kapan kita memerlukan Node.js untuk menggunakan Vue.js?

Ketika tim yang mengerjakan banyak dan aplikasinya sudah cukup besar

● Apa yang perlu dipersiapkan untuk meluncurkan (deploy) aplikasi Vue.js?

Cukup hosting statis biasa

● Apakah Vue.js dapat diluncurkan (deploy) di peladen (server) Apache?

Ya; Vue.js dapat diluncurkan di Apache, Nginx, IIS, dan perangkat lunak peladen lainnya

@jefrydco
 Pertanyaan yang Sering Diajukan

● Apakah Vue.js dapat diluncurkan (deploy) di layanan hosting berbagi yang berbasis PHP?
Ya; Layanan hosting berbagi dapat berperan sebagai hosting statis

● Dimana kita dapat meluncurkan (deploy) aplikasi web Vue.js secara gratis?
Netlify, Vercel, GitHub Pages, Firebase Hosting

● Saya sudah bisa Vue.js, kira-kira saya harus belajar apa lagi?
Bisa lanjut mempelajari Vuex, Vue Router, Nuxt.js

● Saya bingung harus membuat proyek aplikasi apa sebagai bahan latihan?
Dari yang sederhana terlebih dahulu, misalkan aplikasi daftar pekerjaan. Kemudian semakin
kompleks, misalkan membuat klon aplikasi Google Slide ini. 😄

@jefrydco
 Komunitas Vue.js Indonesia

vuejs.id
docs.vuejs.id

bit.ly/vuejsid-github
bit.ly/vuejsid-telegram
bit.ly/vuejsid-facebook
bit.ly/vuejsid-twitter

@jefrydco
 Vue.js Indonesia Membutuhkan Bantuan Kamu

@jefrydco
 bit.ly/subjs-10

@jefrydco
 @daysinDANA
@DANA.ID

DANA Indonesia

DANA Indonesia

@jefrydco
 “Hal-hal besar itu selalu
berawal dari diri kita sendiri”

@jefrydco
 Formulir Umpan Balik

bit.ly/EvalWebinarHimit2

@jefrydco
 Dokumentasi REST API
Parameter Kueri

@jefrydco
 URL : https://cari-teks-video-api.vercel.app/api/search
Metode : POST
Parameter Kueri :

Nama Tipe Data Nilai Contoh Nilai Nilai Standar Wajib Ada? Deskripsi
Parameter

url String https://www.yo - Ya URL video

utube.com/wat YouTube yang
ch?v=klnvttPfO ingin kita cari
UM&t=2257s kata-katanya

q String webdev - Ya Kata kunci

yang
digunakan

@jefrydco
 URL : https://cari-teks-video-api.vercel.app/api/search
Metode : POST
Parameter Kueri :

Nama Tipe Data Nilai Contoh Nilai Nilai Standar Wajib Ada? Deskripsi
Parameter

page Number 1 1 Tidak Memfilter hasil

pencarian
berdasarkan
halaman

size Number 10 10 Tidak Memfilter

seberapa
banyak hasil
pencarian yang
tampil dalam
sekali
permintaan

@jefrydco
 URL : https://cari-teks-video-api.vercel.app/api/search
Metode : POST
Parameter Kueri :

Nama Tipe Data Nilai Contoh Nilai Nilai Standar Wajib Ada? Deskripsi
Parameter

marked Boolean 1 1 Tidak Mencetak tebal

(0 atau 1) kata kunci di
hasil pencarian

paginated Boolean 1 1 Tidak Membuat

(0 atau 1) paginasi untuk
hasil pencarian
atau tidak

@jefrydco
 Dokumentasi API
Respon

@jefrydco
 URL : https://cari-teks-video-api.vercel.app/api/search?
url=https://www.youtube.com/watch?v=klnvttPfOUM&q=webdev
Metode : POST
Contoh Respon :

@jefrydco
 URL : https://cari-teks-video-api.vercel.app/api/search?
url=https://www.youtube.com/watch?v=klnvttPfOUM&q=webdev
Metode : POST
Keterangan :

Nama Kunci Tipe Data Nilai Contoh Nilai Keterangan

data Array<Item Hasil> [ Daftar hasil pencarian

{
start: 1000
end: 1200
text: “lorem ipsum”
}
]

@jefrydco
 URL : https://cari-teks-video-api.vercel.app/api/search?
url=https://www.youtube.com/watch?v=klnvttPfOUM&q=webdev
Metode : POST
Keterangan :

Nama Kunci Tipe Data Nilai Contoh Nilai Keterangan

first string "https://cari-teks-video-a Tautan halaman

pi.vercel.app/api/search pertama dari hasil
?page=1&q=webdev&ur pencarian
l=https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fww
w.youtube.com%2Fwatc
h%3Fv%3DklnvttPfOU
M"

@jefrydco
 URL : https://cari-teks-video-api.vercel.app/api/search?
url=https://www.youtube.com/watch?v=klnvttPfOUM&q=webdev
Metode : POST
Keterangan :

Nama Kunci Tipe Data Nilai Contoh Nilai Keterangan

last string "https://cari-teks-video-a Tautan halaman terakhir

pi.vercel.app/api/search dari hasil pencarian
?page=23&q=web&url=
https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fwww.
youtube.com%2Fwatch
%3Fv%3DklnvttPfOUM"

@jefrydco
 URL : https://cari-teks-video-api.vercel.app/api/search?
url=https://www.youtube.com/watch?v=klnvttPfOUM&q=webdev
Metode : POST
Keterangan :

Nama Kunci Tipe Data Nilai Contoh Nilai Keterangan

prev string | null "https://cari-teks-video-a Tautan halaman

pi.vercel.app/api/search sebelumnya dari hasil
?page=1&q=web&url=ht pencarian. Jika nilainya
tps%3A%2F%2Fwww.y null berarti hasil
outube.com%2Fwatch% pencarian tersebut tidak
3Fv%3DklnvttPfOUM" memiliki halaman
sebelumnya.

@jefrydco
 URL : https://cari-teks-video-api.vercel.app/api/search?
url=https://www.youtube.com/watch?v=klnvttPfOUM&q=webdev
Metode : POST
Keterangan :

Nama Kunci Tipe Data Nilai Contoh Nilai Keterangan

next string | null "https://cari-teks-video-a Tautan halaman

pi.vercel.app/api/search selanjutnya dari hasil
?page=3&q=web&url=ht pencarian. Jika nilainya
tps%3A%2F%2Fwww.y null berarti hasil
outube.com%2Fwatch% pencarian tersebut tidak
3Fv%3DklnvttPfOUM" memiliki halaman
selanjutnya.

@jefrydco
 URL : https://cari-teks-video-api.vercel.app/api/search?
url=https://www.youtube.com/watch?v=klnvttPfOUM&q=webdev
Metode : POST
Keterangan :

Nama Kunci Tipe Data Nilai Contoh Nilai Keterangan

total number 229 Total item hasil

pencarian

page number 2 Halaman pencarian

sekarang

@jefrydco
 URL : https://cari-teks-video-api.vercel.app/api/search?
url=https://www.youtube.com/watch?v=klnvttPfOUM&q=webdev
Metode : POST
Keterangan Item Hasil :

Nama Kunci Tipe Data Nilai Contoh Nilai Keterangan

start number 1000 Detik ke-berapa kata

kunci yang dimaksud
dimulai

end number 1200 Detik ke-berapa kata

kunci yang dimaksud
berakhir

text string “lorem ipsum” Teks yang mengandung

kata kunci yang
dimaksud

@jefrydco