Vue.js Guide

Cara mudah mencoba Vue.js adalah dengan menambahkan salah satu dari script berikut pada index.html yang akan digunakan.

<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1. Berikut contoh dari penggunaan Vue.js untuk menampilkan
“Hello Vue” pada page

{{ message }}
var app= new Vue({
el: '#app', 
data: {message: 'Hello Vue!'}
})

2. Selain itu terdapat penggunaan conditional (v-if) dan loops (v-for) juga dalam vue.js dengan contoh sebagai berikut:

conditional

Now you see me
var app3= new Vue({
el: '#app3', 
data: {seen: true}
})

loops

  1. {{todo.text}}
var app4= new Vue({
el: '#app4', 
data: {todos:[
       {text: 'Learn javascript'},
       {text: 'Learn vue'},
       {text: 'Build something awesome'}
      ]}
})

Pengguna juga dapat menambahkan todos list diatas dengan

app4.todos.push({text: "New item"})

3. Vue juga menyediakan metode binding (v-model) antara input dengan app state/display agar pengguna dapat mengubahnya langsung melalui input

{{ message }}

var app6= new Vue({
el: '#app-6', 
data: {message: 'Hello Vue!'}
})

Vue.js Introduction

Vue.js adalah sebuah front end framework yang dilengkapi dengan berbagai library dan tools untuk membangun user interface dan single-page applications. Bagaimana dengan framework lain seperti AngularJs atau React? Apa kelebihan dari vue.js?

1.Performance
Vue memiliki virtual DOM implementation yang lebih ringan sehingga lebih baik performanya dalam beberapa situasi.
2.Complexity
Vue bisa dikatakan mudah dipelajari dalam segi API dan design. Pengguna baru dapat membuat aplikasi sederhana dalam waktu kurang dari sehari menggunakan vue.
3.Data-binding
Vue menggunakan one way data flow antar komponen sehingga menciptakan flow data yang lebih mudah dipahami dalam aplikasi sederhana.
4.Learnability
Memulai penggunaan Vue cukup mudah dengan dasar HTML dan ES5 Javascript, pengguna baru dapat segera membuat aplikasi sederhana dengan mengikuti petunjuk.
5.Flexibility
Vue dikenal cukup fleksibel dibandingkan framework seperti Angular yang lebih mendukung satu macam struktur atau cara yang menimbulkan batasan-batasan.