Pengenalan Tentang Framework Vue.js
Vue.js adalah sebuah sebuah library yang digunakan bagi membangun sebuah halaman blog yang interaktif, framework Vue.js pada pengucapannya biasanya disebut selaku (vju atau seperti view). Dengan menggunakan vue.js mempunyai sebuah kelebihan dari reactive data binding dan composable view component dengan menggunakan API (Application Programming Interface) yang lebih sederhana, di panduan kali ini kita akan membahas mengenai Pengenalan Mengenai Framework Vue.js
Di framework vue.js bukanlah sebuah framework yang utuh, namun di framework vue.js ini lebih berfokus kepada tampilan atau view, dan di framework vue.js seandainya kita mempunyai sebuah project lebih gampang bagi mengintegrasikan atau menghubungkan dengan vue.js, dan di vue.js pun dapat digunakan bagi membangun single page Application.
Reactive data binding
Berikutnya ada Reactive data binding, adalah sebuah sebuah fitur yang ditawarkan oleh framework vue.js bagi mempermudah pada menjaga sebuah data dan DOM (Document Object Model) agar tetap terhubung, ketika kita menggunakan sebuah jQuery bagi memanipulasi sebuah DOM secara manual dan cenderung terjadi error, namun di vue.js menggunakan sebuah konsep data driven View, maksudnya yaitu dengan menggunakan vue.js kita dapat menggunakan sebuah sintaks pada tampilan HTML.
Berikut adalah sebuah sebuah proses dari vue.js
Berikutnya kita akan mencoba membangun sebuah contoh bagi pemakaian vue.js, nah bagi contoh vue.js nya teman-teman dapat 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>
Berikutnya kita akan membangun proses bagi 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
})
di script index.html diatas terdapat sebuah id=”contoh-1”, id tersebut berfungsi bagi menjalankan proses yang terdapat di index.js, dan hasil dari index.js akan di view di index.html di {{ name }} yang terdapat di index.html nah, Apabila kita jalankan di browser karenanya akan terlihat hasilnya seperti dibawah ini
Nah bagai mana teman-teman telah lumayan pahamkan mengenai framework vue.js nya, demikianlah dulu panduan saya kali ini mengenai Pengenalan Mengenai Framework Vue.js semoga bermanfaat.
Terimakasih.
Sumber https://kursuswebsite.org
