lifelong learner — urip iku urup, currently working on accenture.

Vue.js quicklook – installasi, rendering, binding & directive(loop+if)

0
Degananda.com -

vue adalah sebuah framework frontend yang dibangun dengan javascript untuk membuat single page application atau SPA. Single page application adalah website yang proses navigasinnya tidak perlu melakukan refresh pada browser. Contoh framework SPA populer lainnya adalah

  • React.js dibuat oleh facebook
  • Angular Js dibuat oleh google

berdasarkan vuejs.org , framework ini berfokus pada view layer yang bertujuan untuk memaksimalkan user interfaces serta memudahkan & mempercepat dalam proses development. Selain itu, vuejs.org juga mengklaim bahwa vuejs memiliki learning curve yang lebih rendah dibandingkan dengan angular dan react.

Pada ulasan kali ini kita akan mencoba membuat aplikasi dengan menggunakan vue.js

1. Installasi basic

Kami menyebut basic dikarenakan vuejs memiliki beberapa opsi installasi. Contohnya menggunakan vue cli dan tanpa cli. Pada ulasan ini akan menggunakan vuejs tanpa cli.
installasi tanpa cli sangat mudah hanya cukup memanggil script core vuejs pada file html dengan tag <script></script>

<script src="https://unpkg.com/vue">

Untuk memastikan bahwa vuejs telah berhasil dipanggil dan berjalan dengan baik buka console pada browser. Pastikan muncul seperti gambar dibawah ini.

gambar diatas menunjukan bahwa vuejs berhasil berjalan dalam “development mode”. Development mode berarti saat ini aplikasi masih menampilkan error. Jika dijadikan production mode maka vue akan menghilangkan fungsi error logging untuk meningkatkan performa dari aplikasi.

Perlu diperhatikan bahwa load script vue dan app.js kita sebelum tag </body> jika tidak maka akan terjadi error saat membuat instances vue karena dom belum tersedia pada saat vue dijalankan!!

2. Rendering

rendering adalah proses untuk menampilkan data pada view dari sebuah model. Seperti angular , pada vue untuk melakukan render data ke DOM ditulis dengan menggunakan “{{  }}” / double bracket.

2.1 Membuat instances vue

Dalam memulai membuat project dengan vue, langkah pertama adalah membuat file.js yang kemudian load file tersebut pada html dan membuat instances vue. dengan cara :


var app = new vue({

});

 

terdapat dua parameter yang penting untuk bagian awal ini yaitu :

  1. el , yakni nama “id” dari element html yang nantinnya akan digunakan. Hanya elemen yang berada didalam “id” yang didefinisikan pada parameter “el” saja yang akan digunakan oleh vuejs. Isi dari parameter el ini diawali dengan tanda “pagar”(#)
  2. data, tempat untuk menyimpan data. Contohnya menyimpan nama. parameter data ini ditulis dalam bentuk object.
var app = new Vue({
    el : '#mynote',
    data : { 
        judul : "perkenalan",
        isi : "hello nama saya dega"
    }
});

Contoh penggunaan kedua parameter tersebut adalah sebagai berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Vue quicklook</title>
    <meta charset="utf-8">

</head>
<body>

<div id="mynote">
    <span>{{judul}}</span>
    <span>{{isi}}</span>
</div>

<!-- vue core -->
<script src="https://unpkg.com/vue">
<!-- script load -->
<script src="./app.js">
</body>
</html>
kemudian pada view (index.html) kita lakukan rendering data judul & isi ke DOM dengan menggunakan bracket dan hasil kode diatas adalah sebagai berikut :

3. Binding

untuk melakukan data binding pada vue tag yang digunakan adalah :

vbind:namatag

contohnya adalah sebagai berikut ini :

<span v-bind:title="tanggal">{{judul}}</span>

dan pada app.js kita definisikan tanggal dengan menggunakan instances date.

	data : { 
		judul : "perkenalan",
		isi : "hello nama saya dega",
        tanggal : "tanggal akses : " + new Date()
	}

4. Conditional

kondisional adalah sebuah kondisi yang memenuhi syarat tertentu kemudian melakukan aksi tertentu. Contohnya menghilangkan view elemen ketika memenuhi nilai true dapat menggunakan directive :

<elemen v-if=data>

contoh penggunaan v-if


<span v-if="display">{{isi}}</span>

span yang berisi data “isi” tersebut akan muncul ketika nilai dari variabel display adalah true. Variable tersebut kita tuliskan pada app.js yang kita pada bagian parameter data(saat membuat instances vue).

    data : { 
        judul : "perkenalan",
        isi : "hello nama saya dega",
        tanggal : "tanggal akses : " + new Date(),
        display : false
    }

5. Looping

pada parameter data di instances vue kita juga dapat membuat data yang berupa array object.

    data : { 
        judul : "perkenalan",
        isi : "hello nama saya dega",
        tanggal : "tanggal akses : " + new Date(),
        display : false,
        makanan : [
            {
                nama : "apel"
            },
            {
                nama : "jeruk"
            }
        ]
    }

untuk melakukan render dari data makanan kedalam dom dapat kita gunakan directive “v-for” pada sebuah element.

    
<ul>    
  <li v-for="obj in makanan">{{obj.nama}}</li>
</ul>

ketika dibuka pada browser maka akan menampilkan berupa list.