VueJS - Pendahuluan
Vueadalah kerangka kerja JavaScript untuk membangun antarmuka pengguna. Bagian intinya difokuskan terutama pada lapisan tampilan dan sangat mudah dipahami. Versi Vue yang akan kita gunakan dalam tutorial ini adalah 2.0.
Karena Vue pada dasarnya dibangun untuk pengembangan frontend, kita akan berurusan dengan banyak file HTML, JavaScript dan CSS di bab-bab selanjutnya. Untuk memahami detailnya, mari kita mulai dengan contoh sederhana.
Dalam contoh ini, kita akan menggunakan versi pengembangan vuejs.
Contoh
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
});
</script>
</body>
</html>Keluaran
Ini adalah aplikasi pertama yang kami buat menggunakan VueJS. Seperti yang terlihat pada kode di atas, kami telah memasukkan vue.js di awal file .html.
<script type = "text/javascript" src = "js/vue.js"></script>Ada div yang ditambahkan di badan yang mencetak “My first VueJS Task” di browser.
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>Kami juga menambahkan pesan dalam interpolasi, yaitu {{}}. Ini berinteraksi dengan VueJS dan mencetak data di browser. Untuk mendapatkan nilai pesan di DOM, kami membuat instance vuejs sebagai berikut -
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
})Dalam potongan kode di atas, kita memanggil instance Vue, yang mengambil id dari elemen DOM yaitu e1: '# intro', itu adalah id dari div. Ada data dengan pesan yang diberi nilai‘My first VueJS Task’. VueJS berinteraksi dengan DOM dan mengubah nilai di DOM {{message}} dengan’My first VueJS Task’.
Jika kami kebetulan mengubah nilai pesan di konsol, hal yang sama akan tercermin di browser. Misalnya -
Detail Konsol
Pada konsol di atas, kami telah mencetak objek vue_det, yang merupakan turunan dari Vue. Kami memperbarui pesan dengan“VueJs is interesting” dan hal yang sama segera diubah di browser seperti yang terlihat pada gambar di atas.
Ini hanyalah contoh dasar yang menunjukkan penautan VueJS dengan DOM, dan bagaimana kita dapat memanipulasinya. Dalam beberapa bab berikutnya, kita akan belajar tentang arahan, komponen, loop bersyarat, dll.