 |
| Sumber : codepolitan |
File library Vue dapat ditambahkan dengan ditautkan langung dengan server Vue (CDN) ataupun secara lokal dengan mengunduh terlebih dahulu file tersebut dan menyimpan di lingkungan aplikasi yang akan dibangun. Library Vue versi development dapat diunduh di vuejs.org/js/vue.js sedangkan versi production bisa di unduh di vuejs.org/js/vue.min.js.
Untuk menambahkan library Vue JS ke dalam halaman HTML secara lokal, seperti pada umumnya kita bisa menggunakan kode seperti berikut.
<script src=”assets/vue.js”></script>
Apabila menambahkan Vue dengan menautkan langung dengan server Vue bisa lewat cdn seperti berikut.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Dalam membangun aplikasi dengan skala besar instalasi Vue disarankan menggunakan package manager seperti NPM atau YARN. Disamping itu juga Vue memiliki tools CLI yang dibuat sendiri yang bisa didapatkan di cli.vuej/org sehingga bisa memberikan kemudahan dalam membuat scaffolding projek aplikasi seperti manajemen kode, tools dan konfigurasi saat pengembangan.
Hello World
Mari kita buat kode untuk menampilkan teks hello world menggunakan library Vue dengan cara yang cukup sederhana dengan membuat file html dengan nama file terserah anda kemudian masukan kode berikut.<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="library/vue.js"></script>
</head>
<body>
<div id="apk">
<h2>{{ pesan }}</h2>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#apk',
data: {
pesan: 'Hello World :)'
}
})
</script>
</body>
</html>
Kemudian buka file tersebut dengan menggunakan browser, maka akan menghasilkan tampilan seperti berikut :
Dari kode sederhana ini memang terkesan ribet jikalau hanya untuk menampilkan teks hello world saja namun nantinya Vue dapat digunakan dalam memanipulasi tampilan HTML secara reaktif. Lantas bagaimana Vue dapat bekerja pada kode program di atas.
Pertama kita perlu HTML dalam menjalankan perintah Vue, sebab Vue betugas memanipulasi tampilan HTML.
Kedua kita perlu menambahkan library Vue ke HTML, bisa secara lokal maupun lewat server Vue.
Ketiga kita perlu membuat kontainer berupa elemen HTML, untuk menandai bahwa di dalam HTML tersebut nantinya hasil kompilasi Vue akan ditampilkan. Sebagai penanda maka perlu ditambahkan atribut id yang nanti akan di inisiasi objek Vue.
<div id=”app”>
...
</div>
Keempat perlu menggunakan double mustache atau kurung kurawal dalam menandai bahwa teks tersebut merupakan variabel yang akan dimanipulasi oleh Vue.
<div id=”app”>
<h2>{{ pesan }}</h2>
</div>
Kelima perlu membuat intance untuk class Vue dengan ditulis menggunakan Javascript
Var vm = new Vue({
El: ‘#apk’,
Data: {
pesan: ‘hello world :)’
}
})
Objek Vue yang dibuat akan disimpan ke dalam variabel bernama vm agar memudahkan nantinya saat mengakses objek ini. Properti el menunjukkan id dari elemen HTML yang akan dijadikan target untuk ditampilkan sedangkan properti data adalah apa yang akan ditampilkan. Disamping itu bisa juga menggunakan vm.$mount(‘#apk’) dalam mengarahkan mount point Vue pada saat berjalan.
kita bisa mengakses properti dan variabel dalam objek vm tersebut, misalnya untuk mengakses properti el atau data maka kita bisa gunakan perintah vm.$el atau vm.$data. Adapun untuk mengakses variabel pesan dalam properti data kita bisa gunakan perintah vm.$data.pesan atau langsung vm.message (tanpa tanda dollar).
Menguji Reaktivitas
Pada console di browser, mari kita ubah variabel pesan, dengan menggunakan perintah berikut berikut kemudian tekan enter :vm.message = "Reaktif Dong"
tanpa refresh maka seketika itu juga teks yang muncul di halaman browser berubah sesuai dengan teks yang kita sematkan pada variabel pesan di console. Pada kondisi nyata, tentu saja perubahan data tidak dilakukan dengan menggunakan console pada browser melainkan melalui cara-cara yang natural yaitu menggunakan perintah Javascript yang dijalankan misalnya melalui event onclick button, input dari user, dan lain sebagainya,
Vue merupakan pustaka Javascript yang bekerja memanipulasi elemen HTML menggunakan teknik virtual DOM HTML sehingga lebih cepat prosesnya dibandingkan langsung memanipulasi DOM-nya. Untuk menggunakannya pada aplikasi, maka pustaka Vue cukup di includekan menggunakan element HTML script sebagaimana umumnya pustaka Javascript.
0 Komentar