Catatan sederhana belajar Vue Tanpa Build Tools


Pada catatan ini berisi snaphot belajar VueJS dari website Resminya tanpa menggunakan Build Tool apapun.

Declarative Rendering

Template Saja

1.NothingHappen
Tidak ada yang di-render

Template dan Vue Instance

1.somethingHappen
Angka dirender dibrowser apa danya
1.somethingHappen2
Penambahan

 

 

Variable Data

2.Apakabar-dunia
Mencetak isi variable pesan ke template

2.Apakabar-dunia3

 

 

2.Apakabar-dunia4
Kondisi, Jika true maka munculkan
3.looping
Looping

Menangani Input Data

4.inputtext
Input data dengan v-model

Menangani Method dan click event

4.inputtext2

Membuat dan menggunakan Komponen

5.component-tag

Mengirim Variable Ke Component

5.component-tag2.png
<figura-foto v-bind:url=”url” > </figura-foto>

Array untuk loop Component

5.component-loop.png
Tiga gambar ditampilkan oleh Component yang sama

Callback untuk perubahan dengan watch

6.callback
vm.$watch untuk properti lain cek  API reference

Abaikan Perubahan data Dengan one-time interpolations

14.freeze-model
Perubahan pada input tidak merubah/render ulang

HTML Text

15.htmlmode

Directives

Directive adalah semua yang diawali oleh v-

contohnya:

<p v-if="seen">Now you see me</p>

Computed dan Watcher

Watcher

8.watcher

Computed

7.computed.png

 Setter dan Getter Untuk Computed

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

 

Selesai

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s