present
Diky Arga
Open Source Enthusiast
Part of
Doscom.org - Dinus Open Source Community
&
Mozilla Foundation as Mozilla Tech Speaker
Work for
as Front-end Developer
Coding + Gowes
@dikyarga || dikyarga.com
Vue.js
The Progressive
JavaScript Framework
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces.
Fun Fact about Vue.js
Created by Evan You @yyx990803
monthly npm downloads (~800k) or weekly dev tools users (~270k)
Why we migrate to Vue.js
Easy to integrate, Low Learning Curve
Beberapa Cara Instalasi Vue.js
- Langsung include
- Lewat CDN
- Pakai NPM
- Pakai CLI
- Pakai Bower
Vue Component
Data Binding di Vue.js
v-bind
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
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
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.
List Rendering
Mapping sebuah Array menjadi element dengan v-for
Conditional Rendering
Render view ketika sesuatu terpenuhi dengan v-if atau tidak terpenuhi dengan v-else
Let's build something useful!
-
input field of product name
-
sell button
-
character remaining
-
upload photo
-
remove photo from the form
Breakdown
- Buat kerangka tampilan statik
- Awalnya tombol jual harus disabled, setelah diisi baru aktif
- Tampilkan karakter tersisa
- Kondisional styling warna karakter tersisa
- Tambah dan hapus foto
- Bisa unggah lebih dari satu foto
1. Buat Kerangka Tampilan Statik
Buka aja
<body style="padding: 25px">
<div class="container" id="BukaVue">
<div class="row">
<div class="col-xs-12">
<h5>Jual Barang di BukaVue</h5>
<div class="form-horizontal">
<div class="form-group" >
<label class="control-label col-sm-3">Nama Barang :</label>
<div class="col-sm-5">
<input placeholder="Nama Barang">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-10">
<button type="submit" class="btn btn-primary">Jual</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
contekan, biar cepet aja dan fokus ke Vue.js nya
setup CSS: Bootstrap dan JS: Vue
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!
Ping me at
Telegram : @dikyarga
Email : diky.arga@bukalapak.com