Halo teman teman setia pembaca daengweb.id, kali ini kami memutuskan untuk mengangkat pembahasan seputar Vuejs. Meski bukan satu-satunya library javascript yang populer, tapi menjadi salah satu diantara library yang banyak di gunakan. Maka perkenalkan Vuejs yang merupakan sebuah library atau sebuah framework yang progresif untuk membuat interface web yang interaktif. Vuejs sendiri berfokus sebagai view layer. Oleh karena itu sangat mudah untuk digunakan dan diintegrasikan dengan library lainnya atau project yang telah ada.
Vuejs sebagaimana dikutip dalam official documentation, bahwa Vue tidak support untuk IE8 dan versi sebelumnya, karena menggunakan fitur ECMAScript 5 yang tidak didukung di IE8. Namun mendukung semua browser yang sesuai dengan ECMAScript 5.
Vue Devtools
Ketika menggunakan Vue, sangat direkomendasikan untuk menginstall Vue Devtools pada browser anda, hal ini memungkinkan anda untuk melakukan inspect dan debug Vue app dengan tampilan yang user friendly.
Instalasi VueJS
Untuk menginstall Vue, anda dapat mendownload dan memanggilnya dengan script tag. Vue akan terdaftar sebagai global variable. Vuejs telah menyediakan dua versi yang dapat digunakan diantaranya :
1. Development Version : https://vuejs.org/js/vue.js
2. Production Version : https://vuejs.org/js/vue.min.js
Jika anda tidak ingin mendownloadnya secara langsung, maka anda dapat menggunakan opsi lainnya yakni CDN. Maka anda dapat menggunakan cdn yang telah disediakan : unpkg dan cndjs.
Setelah mendownload / jika anda memutuskan menggunakan cdn, maka selanjutnya silahkan buat file index.html lalu tambahkan script tag berikut didalam kerangka html tag.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Vue - DaengWeb</title>
</head>
<body>
<div id="VueID">
{{ pesan }}
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#VueID',
data: {
pesan: 'Saya sedang belajar vue!'
}
})
</script>
</html>
Pertama, kita memanggil library Vue.js dari cdnjs dengan script tag dan didalam script tag lainnya kita telah memiliki Vue instance. Kita menggunakan div dengan id #VueID yang merupakan element yang akan digunakan, sehingga Vue tahu mana yang akan dituju. Bayangkan element tersebut sebagai sebuah ruang lingkup yang dapat dijangkau oleh Vue. Vue tidak akan bekerja diluar dari element yang telah ditarget. Gunakan el untuk mentarget element yang kamu inginkan.
Menarik bukan ? Pada kesempatan selanjutnya kita akan perlahan-lahan menyelami framework ini. See you next time.
Comments