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