Vue.js merupakan sebuah library yang digunakan untuk membangun sebuah halaman website yang interaktif, framework Vue.js dalam pengucapannya biasa disebut sebagai (vju atau seperti view). Dengan menggunakan vue.js memiliki sebuah kelebihan dari reactive data binding dan composable view component dengan menggunakan API (Application Programming Interface) yang lebih sederhana, pada tutorial kali ini kita akan membahas tentang Pengenalan Tentang Framework Vue.js
Pada framework vue.js bukanlah sebuah framework yang utuh, namun pada framework vue.js ini lebih berfokus kepada tampilan atau view, dan pada framework vue.js jika kita memiliki sebuah project lebih mudah untuk mengintegrasikan atau menghubungkan dengan vue.js, dan pada vue.js juga bisa digunakan untuk membuat single page Application.
Reactive data binding
Berikutnya ada Reactive data binding, merupakan sebuah fitur yang ditawarkan oleh framework vue.js untuk memudahkan dalam menjaga sebuah data dan DOM (Document Object Model) agar tetap terhubung, ketika kita menggunakan sebuah jQuery untuk memanipulasi sebuah DOM secara manual dan cenderung terjadi error, namun pada vue.js menggunakan sebuah konsep data driven View, maksudnya yaitu dengan menggunakan vue.js kita dapat menggunakan sebuah sintaks dalam template HTML.
Berikut merupakan sebuah proses dari vue.js
Selanjutnya kita akan mencoba membuat sebuah contoh untuk penggunaan vue.js, nah untuk contoh vue.js nya teman-teman bisa menyimpan script yang terdapat dibawah ini dengan nama index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="contoh-1">
Hello {{ name }}!
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.min.js"></script>
<script src="index.js" ></script>
</body>
</html>
Selanjutnya kita akan membuat proses untuk vue.js nya, nah silahkan teman-teman simpan simpan script dibawah ini dengan nama index.js
// Model
var exampleData = {
name: 'Vue.js'
}
// "ViewModel"
// yang menghubungkan antara view dan model
var exampleVM = new Vue({
el: '#contoh-1',
data: exampleData
})
pada script index.html diatas terdapat sebuah id=”contoh-1”, id tersebut berfungsi untuk menjalankan proses yang terdapat pada index.js, dan hasil dari index.js akan di view pada index.html pada {{ name }} yang terdapat pada index.html nah, Jika kita jalankan pada browser maka akan terlihat hasilnya seperti dibawah ini
Nah bagai mana teman-teman sudah cukup pahamkan tentang framework vue.js nya, sekian dulu tutorial saya kali ini tentang Pengenalan Tentang Framework Vue.js semoga bermanfaat.
Terimakasih.