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
- {{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!'} })