by Anggie Bratadinata

Mengenal VueJS – 01

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.

vuejs-codepen-console

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:
vuejs-direktif-kondisional-01

Kalo app.status nilainya selain ok jadi begini:
vuejs-direktif-kondisional-02

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:

  1. .stop
  2. .prevent
  3. .once
  4. .self
  5. .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 function inc().
  • Baris 3: selain ngirim 10 ke function mul(), dia juga ngirim objek Event-nya. Ingat, argumennya ga boleh event, $e, ev, atau e. 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 ...


2 Comments

Comments are closed.