Diky Arga

Coding + Gowes

Vue.js

The Progressive

JavaScript Framework

https://vuejs.org/

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces.

Fun Fact about Vue.js

more info : https://www.monterail.com/state-of-vuejs-report

Why we migrate to Vue.js

Easy to integrate, Low Learning Curve

Data Binding di Vue.js

v-bind

https://medium.com/vuejs-id/pengetahuan-dasar-vue-js-bagian-1-88d02d57f859

Data Binding di Vue.js

Binding data ke dalam view

Pakai double kurung kurawal

{{ }}

Data Binding di Vue.js

Attribute Binding

Pakai v-bind:nama-atribut

banyak variasi v-bind ini seperti v-bind:src, v-bind:class, v-bind:alt, dan lain sebagainya.

shortcut seperti :title, :src, :class, :alt dan sebagainya.

Data Binding di Vue.js

Two way data binding

 v-model untuk melakukan two way binding yang biasanya sering ditempelkan pada sebuah elemen input dan textarea HTML

Data Binding di Vue.js

Event Binding

 v-on trigger event seperti : v-on:click, v-on:blur, v-on:focus, v-on:keyup dan sebagainya.

Shorthand: v-on adalah @, jadi sama dengan @click, @change

Mengenal Data dan Method

pada Vue Component

sumber: https://medium.com/vuejs-id/pengetahuan-dasar-vue-js-bagian-2-3616af1461d8

Data

Data di dalam Vue.js merupakan sekumpulan variabel yang digunakan oleh html template dan dapat dimanipulasi dan dimanfaatkan oleh internal komponen masing-masing dan tidak dapat diakses oleh komponen lainnya. Jadi sebuah variabel di dalam suatu komponen Vue.js hanya akan berpengaruh terhadap komponen itu sendiri.

Mengenal Data dan Method

pada Vue Component

sumber: https://medium.com/vuejs-id/pengetahuan-dasar-vue-js-bagian-2-3616af1461d8

Method

Methods merupakan opsi dalam Vue.js yang berupa object berisi function-function. Function ini sendiri akan memiliki berbagai tujuan yang berbeda-beda dan bervariasi baik memanipulasi data ataupun melakukan sebuah logika bisnis sebuah aplikasi.

Let's build something useful!

• input field of product name

• sell button

• character remaining

• upload photo

• remove photo from the form

Breakdown

1. Buat kerangka tampilan statik
2. Awalnya tombol jual harus disabled, setelah diisi baru aktif
3. Tampilkan karakter tersisa
4. Kondisional styling warna karakter tersisa
5. Tambah dan hapus foto
6. Bisa unggah lebih dari satu foto

2. Buat Tombol Jual dari Disabled jadi Aktif

<button type="submit" class="btn btn-primary" :disabled="nameIsEmpty">Jual</button>

init Vue.js and let's go

new Vue({
  el: '#BukaVue',
  data: {
    name: '',
  },
  computed: {
    nameIsEmpty() {
      return this.name.length == 0;
    }
  }
})

JS

<input placeholder="Nama Barang" v-model="name">

HTML

tambah disabled attribute binding

\/ contoh hasil dibawah \/

2. Buat Tombol Jual dari Disabled jadi Aktif

Contoh hasil nya

3. Tampilkan Karakter Tersisa

kita butuh konstanta MAX_NAME_LENGTH

// tambah function characterRemaining() 
// pada option computed

characterRemaining(){
  return MAX_NAME_LENGTH - this.name.length;
}

JS

// buat tag baru
<span>
  {{ characterRemaining }} karakter tersisa
</span>

HTML

\/ contoh hasil dibawah \/

3. Tampilkan Karakter Tersisa

Contoh hasil nya

4. Kondisional styling warna karakter tersisa

kita pakai class binding v-bind:class / shorthand :class

// tambah function showDanger() 
// pada option computed

showDanger(){
  return this.characterRemaining <= 0;
}

JS

<span v-bind:class="{'text-danger': showDanger}">
  {{ characterRemaining }} karakter tersisa
</span>

HTML

\/ contoh hasil dibawah \/

good bye addClass() & removeClass() :D

4. Kondisional styling warna karakter tersisa

Contoh hasil nya

5. Tambah dan Hapus Foto

agak ribet dikit, jadi perhatiin baik-baik ya :D

JS

HTML

\/ contoh hasil dibawah \/

Upload Foto

5. Tambah dan Hapus Foto

agak ribet dikit, jadi perhatiin baik-baik ya :D

JS

HTML

\/ contoh hasil dibawah \/

Conditional rendering dan Hapus Foto

tambahin di computed

tambahin di methods

4. Kondisional styling warna karakter tersisa

Contoh hasil nya

5. Tambah Lebih dari Satu Foto

agak ribet dikit, jadi perhatiin baik-baik ya :D

\/ contoh hasil dibawah \/

Refactor

Bisa kerjain dalam < 10 menit

dapat Voucher Pulsa / Data / Game seneliai 50K

Bukalapak.com

5. Tambah Lebih dari Satu Foto

Contoh hasil nya

<terima-kasih/>

if (you == 'have questions') {

    console.log('Kindly let us know ')

}

We are hiring!

https://careers.bukalapak.com/

Ping me at

Telegram : @dikyarga

Email : diky.arga@bukalapak.com