Dalam artikel ini saya mau kasih sedikit intro tentang library yang sedang naik daun, namanya Vue. Ini adalah library JavaScript untuk bikin UI. Kalo dikelompokin, mungkin bisa satu grup dengan ReactJS. Vue bisa dipake untuk macem-macem keperluan, mulai dari yang sederhana untuk bikin komponen UI, sampai SPA (Single Page Application). Popularitas Vue meroket antara lain karena jadi library default bawaan Laravel 5.
Progressive Framework. Begitu kata Vue Guide. Maksudnya, kita bisa pake Vue sedikit-sedikit. Ga perlu langsung satu website pake Vue semua. Bahkan untuk satu halaman, kita bisa pake Vue seperlunya dulu. Kalo mau migrasi website/aplikasi yang udah jadi dari framework lain ke Vue juga bisa pelan-pelan. Ga perlu gerudukan semua komponen UI langsung ganti.
Sebelum memulai silakan bikin file HTML yang isinya ada skrip ini. Atau nanti langsung edit aja contoh kode di bawah yang saya share di Codepen.
<script src="https://unpkg.com/vue/"></script>
String Template
Untuk menampilkan teks, Vue pake sintaks yang namanya Mustache, bentuknya kurung-kurawal ganda {{ }}
.
See the Pen VueJS – 01. String rendering by Anggie Bratadinata (@masputih) on CodePen.
Jadi dalam contoh kode di atas, kita bikin objek Vue baru yang di-bind dengan elemen #app
. Setelah objek app
dibuat otomatis template {{ message }}
diganti dengan isi data.message
.
Coba buka konsol browser Anda, terus ketik app.title = "Judul Baru"
. Teks dalam div#app
juga akan berubah.
Kalo Anda jalanin kode di Codepen, tinggal klik tombol Console
di panel bawah.
Kita bisa binding dengan nilai balik sebuah function. Dalam contoh berikut, isi elemen p
adalah nilai balik dari getMessage()
.
See the Pen VueJS – String rendering 2 by Anggie Bratadinata (@masputih) on CodePen.
Sama dengan contoh sebelumnya, isi p
otomatis berubah kalo di konsol kita ubah message
, misalnya begini:
app.message = "Ganti message"
Template buat teks ini juga bisa diisi ekspresi/kode sederhana. Dalam contoh di bawah kita bikin ekspresi untuk kasih teks Judul:
& ubah message
jadi huruf besar.
See the Pen VueJS – String rendering 3 by Anggie Bratadinata (@masputih) on CodePen.
Direktif
Seperti framework lain misalnya Angular & Knockout, VueJS juga punya direktif (directive – en). Apa itu direktif? Direktif adalah atribut HTML non-standar yang bertugas melakukan update terhadap DOM. Nama direktif standar bawaan Vue semuanya berawalan v-
. Format direktif kurang lebih begini:
v-[nama][:argumen[.modifier]]
Contoh
v-html // nama: v-html
v-on:change // nama: v-on, argumen: change
v-on:click.prevent // nama: v-on, argumen: click , modifier: prevent
Dalam bagian ini kita bahas beberapa direktif standar.
v-html
Kalo kita mau render hyperlink gimana? Apa bisa begini?
app.message = '<a href="//google.com">Google</a>'
Ga bisa. Bukan link ke Google, yang muncul malah tulisan begini:
<a href="//google.com">Google</a>
Untuk kode HTML, kita harus pake direktif v-html
. Contohnya, link
dalam kode berikut:
See the Pen VueJS – HTML rendering by Anggie Bratadinata (@masputih) on CodePen.
v-bind
Untuk atribut elemen HTML, kita pake direktif v-bind:nama_atribut
.
See the Pen VueJS – HTML attribute by Anggie Bratadinata (@masputih) on CodePen.
Coba di Console jalanin satu-satu:
app.chkBoxChecked = false
app.imageSrc = "//lorempixel.com/100/50/nature/"
v-once
Direktif ini membuat template di-update satu kali aja. Coba edit salah satu contoh Codepen di atas atau bikin Pen baru misalnya gini:
<div id="app">
<p v-once>{{ title }}</p>
</div>
var app = new Vue({
el:'#app',
data:{
title:'Hello Vue'
}
})
Kalo kita ubah nilai app.title
, template {{ title }}
ga ikut berubah. Tetep pake nilai yang lama, karena hanya bisa diset satu kali.
app.title = "Ganti Judul"
v-for
Direktif v-for
bisa kita pake untuk nampilin sekumpulan data berbentuk array atau object. Direktif ini butuh ekspresi ala for-in
, misalnya "item in list"
. Dimana item
adalah alias/referensi untuk setiap elemen di dalam array list
.
See the Pen VueJS – Array rendering v-for by Anggie Bratadinata (@masputih) on CodePen.
Coba tambah data baru. Tabel & list akan otomatis di-update.
app.products.push({ name:'plane', price:5000 })
v-for
juga bisa dipake untuk data berupa hash ( object ).
See the Pen VueJS – Object rendering v-for by Anggie Bratadinata (@masputih) on CodePen.
Selain dua fungsi di atas, direktif ini bisa juga dipake untuk nampilin deret bilangan bulat (integer).
<span v-for="n in 10">{{ n }}</span>
Hasilnya:
12345678910
Kondisional
Tiga direktif : v-if
, v-if-else
, v-else
bisa dipake untuk bikin dan hapus elemen dari DOM berdasar kondisi tertentu.
See the Pen VueJS – v-if/else by Anggie Bratadinata (@masputih) on CodePen.
v-show
mirip dengan v-if
bedanya, kalo kondisi ga terpenuhi, v-show
hanya bikin elemen yang bersangkutan disembunyiin pake CSS display: none
, sedangkan v-if
elemennya benar-benar dihapus dari DOM.
<div style="background:red;width:20px;height:20px" v-show="status === 'ok'"></div>
Kalo kita ganti statusnya jadi selain ‘ok’, elemen <p>YEP</p>
akan dihapus & kotak merah disembunyiin.
Kalo app.status = 'ok'
, dokumennya begini:
Kalo app.status
nilainya selain ok
jadi begini:
Event Binding
Untuk binding dengan event, kita pake direktif v-on:nama-event
, contoh: v-on:click
, v-on:change
. Kita tau objek Event
punya function stopPropagation()
& preventDefault()
, Vue menyediakan modifier untuk keduanya.
Ada 5 event modifier yang disediain Vue:
.stop
.prevent
.once
.self
.capture
Kita coba yang 3 pertama aja. Untuk yang dua lainnya silakan dicoba sendiri.
See the Pen VueJS – Event Binding by Anggie Bratadinata (@masputih) on CodePen.
Kirim Argumen Lewat Event Binding
Kita bisa kirim data / argumen ke event handler. Berikut ini contohnya:
See the Pen VueJS – Event Binding Args by Anggie Bratadinata (@masputih) on CodePen.
Keterangan:
- Baris 2: ngirim
2
sebagai argumen ke functioninc()
. - Baris 3: selain ngirim
10
ke functionmul()
, dia juga ngirim objekEvent
-nya. Ingat, argumennya ga bolehevent
,$e
,ev
, ataue
. Harus$event
.
Filter
Filter adalah proses tambahan untuk mengatur (formatting) teks. Filter hanya bisa dipake di dua tempat: 1. Templat Mustache dan 2. Ekspresi v-bind
. Filter ditulis pake simbol |
(pipe) diikuti nama filternya:
properti [| nama_filter1]..[| nama_filterN]
See the Pen VueJS – Filter by Anggie Bratadinata (@masputih) on CodePen.
Coba ganti app.title
lewat konsol. Contohnya kode, di bawah ini mengubah teks dalam paragraf <p>
jadi VUE IS COOL
& id
-nya jadi vue_is_cool
.
app.title = 'Vue is Cool';
document.getElementsByTagName('p')[0]; // liat id nya
Filter bisa dirangkai (chain), misalnya
<p v-bind:id="title | snake | small ">{{ title | caps }}</p>
Jadi itulah sedikit (sekali) introduksi VueJS. Kapan-kapan dilanjutin lagi.
Mudah-mudahan bermanfaat.
Also in this category ...
- » Mengenal Hook di ReactJS
- » Rust 101: Hello Rust
- » JS : Pemrograman Asinkron
- » End-to-end Testing dengan The Intern
- » Cara Mudah Pakai Environment Variable dengan Webpack
[…] artikel VueJS sebelumnya, kali ini kita bahas sedikit tentang fitur Reactive […]
mantap bang