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

Leave a Reply

Your email address will not be published. Required fields are marked *