Scribd
Unggah
358 tayangan

Tutorial Vue Js

Vue.js adalah framework Javascript untuk membangun antarmuka pengguna dan aplikasi halaman tunggal. Vue.js berperan sebagai layer View dalam arsitektur MVC. Template dan variabel Vue.js dikompilasi menjadi DOM virtual sebelum dirender menjadi DOM sesungguhnya. "

Diunggah oleh

Michelle 6455
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
358 tayangan

Tutorial Vue Js

Vue.js adalah framework Javascript untuk membangun antarmuka pengguna dan aplikasi halaman tunggal. Vue.js berperan sebagai layer View dalam arsitektur MVC. Template dan variabel Vue.js dikompilasi menjadi DOM virtual sebelum dirender menjadi DOM sesungguhnya. "

Diunggah oleh

Michelle 6455
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 145

sumber : https://www.petanikode.

com
https://www.indeveloper.id/
vuejs.org/v2/guide/
Apa itu Vue?

Vue.js adalah sebuah framework Javascript untuk membuat


user interface dan single-page application (SPA).

Vue.js dikenal juga dengan Vue saja dan dieja seperti


membaca kata view (/vju:/).1

Pada arsitektur MVC (Model–View–Controller), Vuejs hanya


akan mengambil peran pada layer View saja.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Aplikasi Vue #1</title>

<!-- Menyisipkan Vuejs dari CDN -->


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<!-- elemen kontainer untuk aplikasi -->


<div id="app">
{{ message }}
</div>

<!-- aplikasi Vue Hello -->


<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello World!"
}
})
</script>
</body>
</html>
Inisiasi Objek Vue
var vm = new Vue({
// options
})

Variabel vm (singkatan dari ViewModel) pada contoh di atas mengacu pada objek Vue, meski
sebenarnya kita tidak harus membuat variabel baru (vm) untuk menyimpan objek dari Vue
kecuali jika memang dibutuhkan.
Sedangkan options bisa kita isi dengan properti-properti yang telah didefiniskan oleh Vue
seperti data, methods, components, dsb.
Properti el
Sebagaimana penjelasan terdahulu bahwa properti el
menunjuk ke tempat dimana hasil kompilasi dari
template dan data akan dimuat.
var vm = new Vue({
el: '#app',
...
})
Properti Data
Property data merupakan salah satu properti pada objek
Vue yang digunakan untuk mendefinisikan variabel-variabel
yang akan digunakan pada aplikasi kita atau dalam konsep
MVVM, data merupakan Model.
var vm = new Vue({
...
data: {
message: 'Hello world!'
}
})
Properti data berbentuk objek yang bertindak sebagai
kontainer dari variabel message. Kita bisa juga
menambahkan variabel lain(misalnya variabel teks) dengan
cara sebagai berikut.
...
data: {
message: 'Hello world!',
teks: 'Semangat Pagi Indonesia'
}
...
Variabel pada properti data bisa kita definisikan dalam
berbagai tipe data seperti string, integer, boolean,
array, dan object. Berikut ini contohnya.
data: {
name: 'Hafid', // string
age: 33, // integer
gender: true, // boolean (Pria)
hobby: ['coding','sleeping'], // array
children: {
1: 'Ammar',
2: 'Faqih',
3: 'Syamil'
} // object
}
properti data yang kita definiskan ini bisa kita
manipulasi isinya pada saat runtime (aplikasi berjalan), disamping itu properti
data ini otomatis memiliki sifat
reactive sehingga perubahan nilai pada variabel data akan memicu render
ulang pada view.

Sifat reactive pada data ini hanya terjadi jika variabel pada properti data telah
kita definisikan saat
objek Vue dibuat, atau dengan kata lain, variabel yang didefinisikan pada saat
runtime tidak akan
memiliki sifat reactive.
Siklus Objek Vue
Objek Vue yang kita definisikan sebenarnya
memiliki siklus hidup atau life cycle mulai dari
ketika objek itu diciptakan, view dirender,
data dimuat, hingga objek itu dihapus.

Dimana pada setiap tahap siklus tersebut


terdapat hook yang bisa kita manfaatkan
untuk menjalankan suatu perintah tertentu.
Terdapat 8 hooks pada siklus tersebut yang digambarkan dengan shape berborder merah. 8
Siklus ini bisa dikelompokkan menjadi 4 bagian.

create
1. beforeCreate yaitu hook sesaat setelah objek Vue dan komponennya diinisialisasi. Properti
data belum dapat diakses atau digunakan pada hook ini.
2. created yaitu hook ketika objek Vue telah selesai diciptakan. Pada hook ini, sifat reactivity
pada properti data juga sudah didefinisikan sehingga kita sudah diizinkan untuk mengakses
dan memanipulasi data. Properti computed yang digunakan untuk memonitor perubahan
data juga sudah berjalan. Jika aplikasi membutuhkan request data dari server maka hook
ini adalah hook yang tepat untuk melakukannya.
Berikut ini contoh kode untuk menggunakan kedua hook ini
yaitu dengan method beforeCreate dan created.
var vm = new Vue({
el: '#app',
data: {
message: 'Hello world!',
},
beforeCreate () {
console.log('before create: '+
'message = ' + this.message)
},
created () {
console.log('created: '+
'message = ' + this.message)
},
});
Pada gambar di atas terlihat bahwa hook created bisa mengakses variabel
message sebaliknya beforeCreate
tidak bisa.
mount
1. beforeMount yaitu hook ketika template dicompile.
2. mounted yaitu hook ketika elemen (properti el) telah
diinisialisasi, data telah dimuat dan view telah dirender
Untuk mencoba kedua hook ini mari kita tambahkan kode
sebagai berikut (hapus kode hook sebelumnya).
beforeMount() {
console.log('before mount: '+
'el = ' + this.$el.textContent)
},
mounted() {
console.log('mounted: '+
'el = ' + this.$el.textContent)
},
Pada kode di atas, kita akan mencoba mengakses DOM dengan
menggunakan fungsi bawaan Javascript
yaitu textContent untuk menampilkan konten teks yang adalah di dalam el
atau dalam hal ini #app.
update
1. beforeUpdate yaitu hook yang terjadi setelah mounted
dan hanya terjadi jika ada perubahan data yang
mengakibatkan render ulang. Tepatnya, hook ini terjadi
sebelum view dirender ulang.
2. updated yaitu hook yang terjadi setelah beforeUpdate
yaitu setelah view dirender ulang.
Untuk mengujinya, mari kita tambahkan kode berikut
(hapus hook sebelumnya)

beforeUpdate() {
console.log('before update: '+
'el = ' + this.$el.textContent)
},
updated() {
console.log('update: '+
'el = ' + this.$el.textContent)
},
Oleh karena hook ini terjadi karena adanya manipulasi atau
perubahan nilai data pada saat runtime, maka kita perlu
sebuah perintah untuk mengubah variabel message. Di
bawah objek Vue kita tambahkan perintah berikut.

vm.message = 'Selamat Datang!'

Kode diatas berfungsi mengubah variabel message yang


sebelumnya Hello world menjadi Selamat datang
var vm = new Vue({
el: '#app',
data: {
message: 'Hello world!',
},
beforeUpdate() {
console.log('before update: '+
'el = ' + this.$el.textContent)
},
updated() {
console.log('update: '+
'el = ' + this.$el.textContent)
},
})
vm.$watch('message', function (newValue, oldValue) {
console.log('Var message diubah dari '+oldValue+
' menjadi '+newValue)
})
vm.message = 'Selamat Datang!'
destroy
1. beforeDestroy yaitu hook yang terjadi sebelum
component dihapus.
2. destroyed yaitu hook yang terjadi setelah objek Vue
dihapus.

Untuk menguji hook ini, sebenarnya kita perlu mengenal terlebih dahulu
komponen. Karena sejak versi 2 ini objek utama Vue "tidak bisa" dihapus,
namun kita masih bisa mensimulasikannya melalui method vm.$destroy().
Berikut ini contoh kodenya.

var vm = new Vue({


...
beforeDestroy () {
console.log('before destroy')
},
destroyed () {
console.log('destroyed')
},
})
vm.$destroy()
Penulisan Template
Pada Vue, template merupakan kode yang menjadi dasar dari suatu tampilan, umumnya kode
template ditulis dengan menggunakan bahasa HTML. Variabel pada template ditulis dengan
menggunakan tanda kurung kurawal (mustache). Template dan variabel (data) dicompile oleh
Vue menjadi Virtual DOM sebelum akhirnya dirender atau ditampilkan dalam bentuk HTML
DOM. Ketika terjadi perubahan data maka akan memicu render ulang dari DOM.
Bentuk-bentuk data terkait hubungannya dengan template ada beberapa macam, dan hal itu
menuntut perlakukan yang berbeda
Data binding di Vue adalah cara vue untuk
menyambungkan data yang ada di kode Javascript dengan
HTML.

Nah, di Vuejs ada dua macam data binding:


• One Way Binding (Satu arah)
• Two Way Binding (Dua arah)
Binding satu arah artinya, binding yang
dilakukan hanya dalam satu arah saja
(dari Javascript ke HTML).

Inilah yang disebut binding satu arah,


meskipun kita mengubah nilai message
dari input field, data yang ada di kode
Javascript-nya tidak akan ikut berubah.

Coba perhatikan kode aplikasinya, di


sana kita menggunakan v-bind: pada
atribut value untuk mengambil data dari
message.
Berikutnya kita akan coba binding
dua arah, silahkan buat kode
aplikasinya seperti ini:

Saat kita mengubah nilai dari input


field, maka nilai yang ada di kode
javascript-nya juga akan berubah.

Inilah yang disebut two way binding.

Sebenarnya kita hanya


menggunakan direktif v-model untuk
melakukan binding dua arah.
Yang perlu diingat adalah:

• Saat kamu membuat aplikasi


dengan Vue, maka wajib hukumnya
membuat vue instance atau objek
app.
• Vuejs bersifat reaktif, saat datanya
berubah maka elemennya akan di-
render ulang
• Binding data di Vue ada dua cara,
yakni satu arah dan dua arah
• Binding data di Vue dilakukan
dengan menggunakan direktif.
Apa itu Directive pada Vuejs?

Directive adalah atribut khusus • contoh :


yang diawali dengan v-. Directive <p v-if="seen">Now you see me</p>
berfungsi untuk menjalankan <input type="text" v-
satu perintah atau ekspresi bind:value="namaVriabel" />
javascript di dalam atribut. <input type="text" v-
model:value="namaVriabel" />
Tugas utama dari direktif
sebenarnya untuk menerapkan Intinya:
‘efek samping’ kepada DOM saat “Jika kamu melihat atribut yang
diawali dengan prefix v-, maka itu
terjadi perubahan data pada
adalah direktif untuk Vuejs.”
ekspresinya.
Argumen untuk Drektif

Beberapa direktif membutuhkan


argumen. Argumen untuk direktif ditulis
setelah titik dua.

Direktif v-bind digunakan untuk data


binding atau update nilai dari atirubut.
Pada contoh di atas, href adalah argumen
yang kita berikan pada direktif v-bind.

Ini artinya, kita ingin memberi tahu,


direktif v-bind untuk melakukan binding
data pada atribut href dengan variabel url.
• Contoh lain:
<img v-bind:src="imageUrl"
v-bind:alt="altText"
v-bind:title="title"
/>
Argumen untuk direktif
juga dapat diberikan
secara dinamis, fitur ini
mulai diperkenallkan pada
Vue versi 2.6.0+.

Argmen dinamis,
diberikan di dalam tanda
kurung siku [...].
Modifier untuk Direktif
Beberapa direktif bisa
• Contoh:
menggunakan modifier. Modifier
adalah fungsi tambahan yang
• <form v-
akan dieksekusi saat
on:submit.prevent="onSubmit"> ...
menggunakan direktif. </form>

Modifier dapat diberikan setelah Pada contoh tersebut, kita


argumen dengan tanda titik, lalu menggunakan modifier prevent untuk
diikuti dengan nama modifiernya direktif v-on. prevent adalah modifer
untuk memanggil fungsi
event.preventDefault().
Shorthand untuk Direktif

Singkatan untuk direktif v-bind: Singkatan untuk direktif v-on:


<!-- tanpa singkatan -->
<a v-bind:href="url"> ... </a>
<!-- tanpa singkatan -->
<!-- shorthand --> <a v-on:click="doSomething"> ... </a>
<a :href="url"> ... </a>
<!-- shorthand -->
<!-- shorthand untuk argumen dinamis (2.6.0+) -->
<a @click="doSomething"> ... </a>
<a :[key]="url"> ... </a>

<!-- shorthand untuk argumen dinamis


(2.6.0+) -->
<a @[event]="doSomething"> ... </a>
Vuejs memiliki banyak direktif, bahkan kita juga bisa
membuat custom direktif sendiri.
Namun, ada bebreapa direktif yang harus kita ingat:
• Direktif Data Binding: v-bind, v-model, v-html, v-text,
dll.
• Direktif Conditional Rendering: v-if, v-else, v-else-if
• Direktif Perulangan: v-for
• Direktif Event: v-on
Direktif data binding
Direktif data binding adalah direktif yang • contoh :
bertugas untuk mem-binding data ke
HTML. Berikut ini beberpa direktif yang • contoh direktif data binding
sering digunakan untuk data binding:
• v-bind untuk binding data satu arah;
• v-model untuk binding data dua arah;
• v-html untuk menampilkan data HTML;
• v-text untuk menampilkan data dalam
plain teks;
• v-once untuk menampilkan data satu
kali (tidak di-render ulang meskipun
data berubah).
Direktif untuk Conditional Rendering
Direktif untuk coditional rendering akan • contoh :
kita butuhkan untuk menampilkan data
tertentu yang berdasarkan kondisi. contoh direktif conditional re
ndering
Direktif ini terdiri dari:
• v-if digunakan jika hanya ada satu
kondisi;
• v-else digunakan saat memiliki dua
kondisi;
• v-else-if digunakan jika memiliki
banyak kondisi.
• Mirip seperti percabangan dalam
pemrograman ya..
Direktif untuk Perulangan

Direktif perulangan biasanya • contoh :


digunakan untuk nemapilkan contoh direktif perulangan
banyak data seperti list.

Direktif ini hanya terdiri dari


v-for dan juga bisa
dikombinasikan dengan v-if.
Direktif untuk Event
• contoh :
• Direktif ini digunakan
contoh direktif event
untuk menangani event,
misalnya saat sesuatu Direktif event biasanya akan mem-binding
sebuah fungsi atau methods. Tapi pada contoh
diklik, disentuh, di-scroll, di atas, kita menggunakan ekspresi biasa.
dll.
Ini karena kita hanya mengeksekusi satu baris
perintah saat event onMouseOver dan
onMouseOut.
• Direktif untuk event adalah
v-on, atau bisa disingkat Tapi kalau mengeksekusi lebih dari satu
perintah, sebaiknya menggunakan method
dengan simbol @ saja. atau fungsi.
Macam-macam Properti pada Vue.js (Computed, Methods, Watcher)

Computed Property

Properti ini mengolah value


yang berasal dari data atau
berasal dari v-model.
Menyimpan value
perhitungan tersebut pada
cache, mengembalikan
nilainya dan mengevaluasi
perubahannya.
Berikut contoh dalam
pengaplikasian computed
property:

Keterangan:
{{jumlah}} didapat dari fungsi
jumlah yang terdapat pada
computed property
this.bil mengacu pada bil1 yang
terdapat pada data. Karena
terdapat pada lingkup var app,
maka digunakan pengacu this.
Methods

skenarionya:
• Nilai jumlah pada awalnya kosong
• Klik button proses
• Nilai jumlah akan berubah sesuai dengan
hasil yang sebenarnya.
Keterangan:
• Maksud dari v-on:click=’diproses’ adalah
ketika ada aksi untuk melakukan klik pada
button proses, secara otomatis vue akan
menjalankan skrip yang ada pada method
diproses().
Watcher

fitur ini melihat perubahan yang terjadi ketika


suatu aksi dilakukan.

Keterangan:
Pada skrip di atas, kita melakukan monitoring
terhadap variabel isi yang ada pada tag html
<input type=’text’ v-model=’isi’>,
Ketika kita melakukan aksi pada inputan
tersebut, maka properti watcher mulai bekerja
dan secara otomatis menjalankan skrip yang
memonitor variabel isi yang telah kita
daftarkan di properti watcher.
Binding CSS dengan inline style
<div id="app">
<script>
<div :style="{color:'red'}">{{ message }}</div>
let vm = new Vue({
<div :style="styleObject2">{{ message }}</div>
el : '#app',
<div :style="[styleObject,styleObject2]">{{ message }}</div>
data : {
</div>
message:'Hellossss',
styleObject: {
pada div pertama kita hanya mengakses message dari
fontSize: '200px',
javascript dan memberikan style yaitu color: ‘red’ (memberikan
color: 'blue' secara langsung style di dalamnya).
},
styleObject2: { Pada div yang kedua kita akan mengakses message dari
fontSize: '100px', javascript kita serta memberikan style dengan cara mengakses
color: 'green' code style yang telah kita buat di Javascript yang bernama
} styleObject2 .
}
}) Pada div yang ketiga kita akan mencoba untuk mengakses dua
</script> block code style yang telah kita buat dan memasukannya di
dalam Array (hanya untuk mencoba , untuk melihat code style
mana yang nanti nya akan dipakai)
Binding css dengan class
<!DOCTYPE html> <script
<html lang="en"> src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></
script>
<style>
.active{
color : green; <script>
} new Vue({
.notActive{
color : red;
el : '#app',
} data : {
</style> name:'Vincent'
}
<div id="app">
<h1 :class="'notActive'">{{name}}</h1> })
<h1 :class="'active'">{{name}}</h1> </script>
</div>
Form Binding

Text
• <input v-model="message"
placeholder="edit me">
• <p>Message is:
{{ message }}</p>
Multiline text
<span>Multiline message is:</span>
<p style="white-space: pre-
line;">{{ message }}</p>
<br>
<textarea v-model="message"
placeholder="add multiple
lines"></textarea>
Checkbox
Single checkbox, boolean value:

<input type="checkbox"
id="checkbox" v-
model="checked">
<label
for="checkbox">{{ checked }}</la
bel>
Multiple checkboxes, bound to the same Array: new Vue({
<input type="checkbox" id="jack" value="Jack" v-
model="checkedNames">
el: '...',
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-
data: {
model="checkedNames">
<label for="john">John</label>
checkedNames: []
<input type="checkbox" id="mike" value="Mike" v-
model="checkedNames"> }
<label for="mike">Mike</label>
<br> })
<span>Checked names: {{ checkedNames }}</span>
Radio
<input type="radio" id="one"
value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two"
value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked:
{{ picked }}</span>
Select new Vue({
Single select:
el: '...',
<select v-model="selected"> data: {
<option disabled value="">Please selected: ''
select one</option>
<option>A</option> }
<option>B</option> })
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
Multiple select (bound to Array):

<select v-model="selected"
multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected:
{{ selected }}</span>
Dynamic options rendered with v-for: new Vue({
el: '...',
<select v-model="selected"> data: {
<option v-for="option in options" v- selected: 'A',
bind:value="option.value"> options: [
{{ option.text }} { text: 'One', value: 'A' },
</option> { text: 'Two', value: 'B' },
</select> { text: 'Three', value: 'C' }
<span>Selected: {{ selected }}</span> ]
}
})
Value Bindings
For radio, checkbox and select options, the v-
But sometimes, we may
model binding values are usually static strings (or want to bind the value to a
booleans for checkboxes):
dynamic property on the Vue
<!-- `picked` is a string "a" when checked -->
<input type="radio" v-model="picked" value="a">
instance. We can use v-bind
to achieve that. In addition,
<!-- `toggle` is either true or false -->
<input type="checkbox" v-model="toggle">
using v-bind allows us to
bind the input value to non-
<!-- `selected` is a string "abc" when the first option
is selected --> string values.
<select v-model="selected">
<option value="abc">ABC</option>
</select>
Checkbox // when checked:
<input vm.toggle === 'yes'
type="checkbox" // when unchecked:
v-model="toggle" vm.toggle === 'no'
true-value="yes"
false-value="no"
>
Radio
<input type="radio" v-
model="pick" v-
bind:value="a">
// when checked:
vm.pick === vm.a
Select Options
<select v-model="selected">
<!-- inline object literal -->
<option v-
bind:value="{ number:
123 }">123</option>
</select>
// when selected:
typeof vm.selected // => 'object'
vm.selected.number // => 123
Modifiers
.lazy
By default, v-model syncs the input
with the data after each input event
(with the exception of IME
composition, as stated above). You
can add the lazy modifier to instead
sync after change events:

<!-- synced after "change" instead of


"input" -->
<input v-model.lazy="msg">
.number
If you want user input to be
automatically typecast as a Number,
you can add the number modifier to
your v-model managed inputs:

<input v-model.number="age"
type="number">
This is often useful, because even
with type="number", the value of
HTML input elements always returns a
string. If the value cannot be parsed
with parseFloat(), then the original
value is returned.
.trim
If you want whitespace from
user input to be trimmed
automatically, you can add
the trim modifier to your v-
model-managed inputs:

<input v-model.trim="msg">
form binding
Baris 3 - 4: Kita buat input dengan v-
<div id="app">
model="pesan_input" sehingga ketika ketikkan value
<!-- Input biasa --> pada field input tersebut, maka akan mengisi pada object
<input v-model="pesan_input" placeholder="edit me"> pesan_input dan akan langsung ditampilkan / diupdate
<p>Single Message: {{ pesan_input }}</p> pada baris ke-4 yang sudah kita binding dengan
<!-- Input menggunakan textarea --> {{ pesan_input }}.
<textarea v-model="pesan_textarea" placeholder="edit Baris 6 - 8: Sama seperti sebelumnya, namun yang ini
me"></textarea> kita menggunakan textarea dan outputnya kita
<p>Multiple Message:</p> tambahkan style "white-space: pre-line" sehingga ketika
memberikan baris baru / enter maka outputnya juga akan
<p style="white-space: pre-
mengikuti memberikan efek baris baru.
line;">{{ pesan_textarea }}</p>
Baris 10 - 11: Sama dengan input yang pertama, cuma
<!-- Menggunakan input modifier "lazy" -->
saja kita tambahkan input modifier berupa "lazy" yang
<input v-model.lazy="msg" > mana value akan ditampilkan pada data binding ketika
<p>Your Lazy msg: {{msg}}</p> kita memfokuskan cursor kita ke area lain setelah
<!-- Menggunakan input modifier "number" --> mengetikkan value-nya. Silahkan dicoba sendiri pada
<input v-model.number="age" type="number"> Demo dibawah ya.
<p>Your Age: {{age}}</p> Baris 13 - 14: Kita gunakan input modifier juga berupa
<!-- Menggunakan input modifier "trim" --> "number" agar user hanya bisa menginputkan data
berupa angka.
<input v-model.trim="pesan">
Baris 16 - 17: Kita gunakan input modifier berupa "trim"
<p>Your Pesan: {{pesan}}</p>
untuk menghilangkan spasi yang berlebih baik dari awal
</div> maupun akhir teks.
Components Basics
// Define a new component called <div id="components-
button-counter
demo">
Vue.component('button-counter', {
data: function () { <button-counter></button-
return { counter>
count: 0 </div>
}
},
template: '<button v-on:click="count+ new Vue({ el: '#components-
+">You clicked me {{ count }} demo' })
times.</button>'
})
contoh lain
<div id="dw" class="container"> Vue.component('dw-paragraf', {
<dw-paragraf></dw-paragraf> template: '<h1>Membuat
component</h1>'
</div> });
​
new Vue({
el: '#dw',
});
<div id="dw" class="container"> <script
src="https://cdn.jsdelivr.net/npm/vue/dist/vue.j
<dw-paragraf v-bind:dw="{isi: s"></script>
'Belajar vue.js', jam: '10.00'}"></dw- <template id="dw-paragraf">
paragraf> <h1>{{ dw.isi }} pada jam {{ dw.jam }}</h1>
<dw-paragraf v-bind:dw="{isi: </template>
'Belajar Laravel', jam: '12.30'}"></dw- <script type="text/javascript">
paragraf> Vue.component('dw-paragraf', {
<dw-paragraf v-bind:dw="{isi: props: ['dw'],
'Belajar HTML', jam: '18.00'}"></dw- template: '#dw-paragraf'
paragraf> });
​
</div>
new Vue({
el: '#dw',
});
</script>
konsep component pada Component merupakan sub
class/objek dari Vue yang bisa kita
Vue dan penggunaannya buat untuk berbagai tujuan misalnya
pada aplikasi. memecah kompleksitas kode,
Konsep component pada reusabilitas kode, dan modularitas
kode. Setiap component memiliki
Vue mirip dengan konsep lifecycle
Web Components. yang sama dengan objek Vuenya.
Sebuah aplikasi Vue bisa Untuk membuat sebuah component
baru, cukup dengan kode
dibangun dari beberapa menjalankan method
component yang memiliki Vue.component('nama-component',
strukturnya hirarki { /* options */ })
Vue.component('hello-world', { <div id="app">
data () {
return {
<hello-world></hello-world>
message: 'Hello world!' </div>
}
},
template: '<h1> {{ message }}</h1>'
})
var vm = new Vue({
el: '#app',
})
Penamaan Component
Terdapat dua format penamaan component 2. PascalCase
pada Vue Format PascalCase artinya menggunakan
1. kebab-case huruf capital pada huruf pertama setiap kata
Format kebab-case artinya menggunakan di mana antar kata
huruf lowercase dan antar kata dipisah tidak dipisah.
dengan tanda - (dash).
Vue.component('MyComponentName', { /* ... */ })
Vue.component('my-component-name', {/* ... */})
Ketika kita mendefinisikan component dengan
menggunakan format PascalCase, maka kita bisa
Ketika kita mendefinisikan component dengan
memilih
menggunakan format kebab-case, maka komponen
tersebut untuk mengakses komponen tersebut dengan cara <my-
component-name> atau <MyComponentName>.
dapat diakses menggunakan custom element <my-
component-name> Namun hanya elemen kebab-case yang dianggap valid
oleh DOM.
Component Registration
Terdapat dua cara untuk meregister contoh :
Vue.component('component-a', {
component pada Vue supaya bisa template: `<p>Component A</p>`
})
digunakan yaitu global dan local. Vue.component('component-b', {
template: `<p>Component B</p>`
})
Vue.component('component-c', {
Global Component template: `<p>Component C</p>`
})
Register component secara global akan new Vue({ el: '#app1' })
membuat component tersebut bisa digunakan new Vue({ el: '#app2' })
oleh semua objek utama (root) Vue, cara
<div id="app1">
meregister component secara global <h1>Objek Vue 1</h1>
sebagaimana contoh di atas yaitu <component-a></component-a>
<component-b></component-b>
menggunakan method </div>
<div id="app2">
<h1>Objek Vue 2</h1>
Vue.component('my-component-name', {/* ... */}) <component-a></component-a>
<component-c></component-c>
</div>
new Vue({
Local Component el: '#app',
Register component secara local artinya components: {
component tersebut diregister pada suatu 'component-a': ComponentA,
objek Vue dan hanya bisa digunakan pada 'component-b': ComponentB,
objek tersebut saja. 'component-c': ComponentC
}
Untuk mendefinisikan component local cukup
})
dengan menggunakan object Javascript biasa

contoh :
var ComponentA = { <div id="app">
template: `<p>Component A</p>` <component-a></component-a>
} <component-b></component-b>
var ComponentB = {
<component-c></component-c>
template: `<p>Component B</p>`
</div>
}
var ComponentC = {
template: `<p>Component C</p>`
}
Deklarasi Properti Data
Strukturnya components secara umum
hampir sama dengan objek utama Vue, salah
satu yang membedakan adalah definisi
properti data pada component tidak lagi
sebagai object melainkan sebagai sebuah
fungsi.

data: {
message: 'Hello world'
}

// menjadi
data () {
return {
message: 'Hello world!'
}
}
Reusable Component

Component ini kemudian


dapat digunakan berkali-kali
atau reusable.

<div id="app">
<hello-world></hello-world>
<hello-world></hello-world>
<hello-world></hello-world>
</div>
Component Lanjutan
• Kirim Data ke Component contoh, kita mempunyai component book,
dengan tiga props yaitu title, description dan
Vue mempunyai mekanisme untuk mengirimkan image.
atau mengeset suatu data pada component yaitu
var BookComponent = {
dengan menggunakan properti props. data () {
Untuk mendefinisikan props, pada component return {
caranya cukup dengan menambahkan properti classCard: 'card'
}
props
},
props: [ 'title', 'description', 'image' ],
props: [ 'nama_props1', 'nama_props2' ], template : `
<div :class="classCard">
<h3>{{ title }}</h3>
Kemudian pada template dari component tersebut <img :src="'images/books/'+image" style="width:100%">
<p v-html="description"></p>
kita bisa akses props tersebut layaknya properti
</div>
data `
}
template : `<div> {{ nama_props1 }} </div>` Catatan: template harus memiliki elemen root
tunggal (wrapper), pada contoh di atas, rootnya
adalah elemen <div>
new Vue({
el: '#app',
components: {
'book': BookComponent,
}
})

<div id="app">
<book
title="C++ High Performance"
description="Write code that scales across CPU
registers, multicore, and machine clusters"
image = "c++-high-performance.png"
>
</book>
</div>
Untuk merapikan tampilan, untuk sementara kita
akan buat style CSS sederhana (letakkan pada
elemen style pada head)

.card {
background: #efefef;
border:1px solid #ddd;
margin-right:5px;
padding:5px;
width: 200px;
float:left;
}
h3{
min-height: 45px;
Nilai dari variable title, description, dan image
} dikirimkan atau dilewatkan dari luar component akan
muncul atau dapat diakses dari dalam component
layaknya properti data.
Directive Pada Component
Component pada Vue bisa diibaratkan Nah dengan konsep ini, maka kita bisa
sebagai elemen HTML di mana ada atribut mendefinisikan nilai props title secara lebih dinamis
berupa directive yang bisa diaplikasikan menggunakan properti data.
padanya. Sebagai contoh, kita akan
menampilkan data dalam bentuk list <book :title='judul'></book>
menggunakan elemen berupa component.
Adapun directive yang kita gunakan adalah v- Props title kita bind ke variabel judul (nama
for dan v-bind atau :. variabelnya bisa bebas saja), cukup dengan
menambahkan
directive v-bind atau :.
Pada bagian sebelumnya, pendefinisian nilai
props dari component dilakukan secara
hardcode langsung pada componentnya,

<book title='judul buku'></book>


kemudian, pada objek utama Vue kita perlu
tambahkan data judul sebagai berikut:

var vm = new Vue({


el: '#app',
components: {
'book': BookComponent,
},
data: {
judul: 'judul buku'
}
})
Properti data books berbentuk array dari objek, silakan merujuk
kembali ke bab yang membahas tentang List.
Kemudian pada template utama, kita akan gunakan v-for untuk
merender data books di atas, sebagai berikut.
Supaya kode lebih rapi dan mudah dibaca, sekarang kode template utamanya cukup seperti
tentunya kita bisa saja mengubah tipe data yang berikut.
kita kirimkan ke component melalui props, di mana
sebelumnya teks biasa menjadi objek buku.
Untuk melakukan hal itu maka, deklarasi
component book harus kita ubah menjadi seperti
berikut.
Update Data Parent From Component
Kebalikan dari bagian sebelumnya, kita juga diizinkan
untuk mengupdate data pada objek parent melalui
component. Hal ini bisa kita lakukan dengan
menggunakan perintah $emit('event', 'nilai').

Event pada kode di atas adalah custom event handler


pada parent component yang akan dilisten oleh
component tersebut. Sedangkan nilai dapat berisi
perintah dyang akan dijalankan dalam bentuk JS
Expression

Mari coba kita simulasikan hal itu melalui contoh berikut


ini. Kita masih akan menggunakan kode
sebelumnya, namun kita perlu tambahkan variabel baru,
misalnya selectedBook yang nantinya akan
digunakan untuk menampung data judul buku yang dipilih
atau diklik oleh pengguna.
Kemudian pada template, kita akan tambahkan Pada contoh di atas, custom event yang kita gunakan
kode untuk menampilkan data selectedBook dan bernama @selected (bebas saja, kamu bisa gunakan
juga kita akan tambahkan custom event yang @pilihan atau yang lain). Sedangkan nilainya, kita
berfungsi mengubah nilai dari data selectedBook gunakan perintah selectedBook = $event, yang
berarti bahwa nilai selectedBook nantinya akan diisi
dengan nilai dari $event.

Nah nilai dari $event nantinya adalah nilai yang


didapat dari perintah $emit yang di eksekusi di dalam
component book.
Pada template component, kita tambahkan Nilai dari book.title atau judul buku akan di-emit atau di
button yang berfungsi mentrigger event set ke event selected. Sehingga ketika kita merujuk ke
selected yang kita definisikan di atas. kode sebelumnya maka dengan cara ini, nilai dari
selectedBook akan sama dengan nilai dari book.title.

Dari kode di atas, kita cukup fokus pada bagian ini:


<button @click="$emit('selected', book.title)"> Select </button>
Two Way Data Binding on Component
Pada pembahasan yang lalu, kita <input v-model="searchText">
telah membahas tentang two way
data binding pada kasus elemen input setara dengan kode berikut
dengan menggunakan directive v-
<input :value="searchText"
model. Pada bagian ini kita akan
@input="searchText = $event.target.value">
membahas mengenai hal tersebut
namun
pada kode kedua, v-bind bertugas memastikan
untuk diterapkan pada component bahwa attribut value bernilai sama dengan variabel
untuk input data. searchText. Sedangkan v-on bertugas mengupdate
variabel searchText sesuai data yang diinput oleh
Ingat bahwa kode v-model memiliki user.
padanan sebagai berikut.
Melalui pendekatan ini, kita bisa terapkan pada
component custom input
<custom-input Berikut ini kode pada component.
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>

Di dalam component ini elemen input harus


melakukan dua hal:
Bind atribut value ke value props sehingga
sama nilainya dengan componentnya. Nah, dengan deklarasi component seperti itu,
Ketika event input, emit event input dengan maka kita sekarang bisa gunakan cara yang
value baru. lebih singkat pada
template utama kita yaitu :

<custom-input v-model="searchText"></custom-input>
Content Distribution with Slots
Pada bagian terdahulu tentang mengirimkan Sehingga untuk mengaksesnya pada template cukup
data ke Component, telah dibahas mengenai dengan <information></information>, Nah kita tidak
cara mengirimkan data ke component dengan bisa serta merta menambahkan sesuatu konten di
antara tag information tersebut layaknya tag html
menggunakan props, nah pada bagian ini kita
biasa.
akan belajar mengirimkan konten ke dalam
component. Sehingga kode template berikut akan menampilkan
error
Misalnya kita memiliki component bernama
information <information>Halo apa kabar?</information>
caranya, kita harus deklarasikan Kemudian component tersebut dapat kita panggil
menggunakan elemen slot sebagai berikut.

Nah, pada contoh di atas, elemen <slot></slot> akan di-


replace dengan konten <p>Hati-hati lantai licin!</p>

Dibandingkan dengan props, penggunaan slot lebih


fleksible yang memungkinkan pengguna component
mengirimkan konten berupa HTML ataupun template ke
dalam component, sehingga tampilan component
akan sangat mudah dikustomisasi.
Fallback Slots
Kita juga diizinkan memberikan konten default
untuk suatu slot yang tidak diset di parent,
caranya dengan menambahkan konten di
dalam tag slot.

<information></information>

Maka ketika dirender akan menampilkan konten


Tanpa informasi
Penamaan Slot
Bagaimana jika konten yang akan kita kirimkan cara mendefinisikan konten masing-masing slot
lebih dari satu bagian? misal pada component component tersebut pada template utama dengan
information kita memiliki dua bagian konten di menggunakan elemen template dengan attribut v-
mana bagian pertama berisi konten judul dari slot yang bernilai nama dari slot yang dituju.
informasi dan konten kedua berisi isi dari informasi,
kodenya sebagai berikut

Vue.component('information', {
template: `
<div class="card">
<slot name="judul"></slot>
<hr>
<slot name="isi"></slot>
</div>
`
})
Single File Component
ES6 memungkinkan kita bisa membuat
deklarasi component dalam file yang terpisah
sehingga file utama tidak menjadi terlalu
panjang. Hal ini bisa dilakukan dengan fitur
import dan export.

Buat file bernama BookComponent.js yang


berisi deklarasi dari component book yang
telah kita bahas sebelumnya

Kode di atas meng-export konstanta BookComponent.


Kemudian pada file utama, kita import file
BookComponent.js di atas.
Dynamic Components
Ide dari dynamic component ini adalah kita
bisa memuat (meload) suatu component yang
sudah diregister secara dinamis, atau hanya
akan kita muat jika kita perlukan saja.

Misalnya kita memiliki dua component yaitu


list dan detail.
Lalu pada template kita tampilkan
semua.
kita bisa memuat component secara dinamis dengan Lalu pada template ubah menjadi.
menggunakan elemen <component>, elemen ini
memiliki directive v-bind:is atau :is untuk memantau
pergantian component yang dimuat.

<component :is="currentComponent"></component>
Transition Effect
Vue menyediakan cara yang sederhana untuk
memberikan efek animasi transisi. Pada
bagian sebelumnya yaitu dynamic
component, kita dapat menambahkan efek
animasi atas pergantian component supaya
pergantiannya terasa lembut dan menarik.

Caranya dengan menggunakan elemen Kemudian tambahkan style css berikut.


<transition>. Ubah template menjadi sebagai
berikut.
Mixins
Mixins merupakan cara pada Vue untuk
mendefinisikan suatu kumpulan fungsi atau
option yang akan digunakan pada aplikasi
atau component tertentu. Ketika objek Vue
atau component menggunakan mixins maka
semua option dari mixin tersebut akan di
digabungkan ke dalam component yang
menggunakannya tersebut.

Contoh definisi mixins. Defini tersebut jika digunakan pada Vue objek seperti berikut.
Properti created dan methods pada mixins melebur ke
dalam objek Vue, sehingga objek Vue memiliki
behavior yang sama dengan mixinnya.
Deklarasi mixin pada object Vue atau component
pada contoh di atas termasuk deklarasi local.
Mixins seperti juga component dapat
dideklarasikan secara global. Berikut ini contoh
deklarasi global mixin.

Catatan: hati-hati menggunakan global mixins, sebab akan


mempengaruhi setiap object atau component pada Vue.
Plugins
Plugins biasanya digunakan sebagai wrapper Berikut ini contoh deklarasi plugin.
untuk menambahkan atau mendaftarkan
suatu fitur global pada Vue, misalnya plugin
untuk menambahkan:

 global methods atau properties. contoh:


vue-custom-element
 global assets: directives/filters/transitions.
contoh: vue-touch
 component options menggunakan global
mixin. contoh: vue-router
 methods untuk objek Vue melalu
Vue.prototype.
Suatu plugin digunakan melalui method
Vue.use():

Catatan: Kode Vue.use secara otomatis


mencegah duplikasi plugin.
Sebagai sub class dari Vue, dengan Adapun mixins digunakan untuk mendefinisikan
menggunakan component akan options yang umum digunakan dibanyak
memungkinkan kita memecah kode component, sehingga tidak terjadi duplikasi atau
perulangan kode. Kemudian untuk
aplikasi yang kompleks menjadi beberapa mendistribusikannya pada komponen bisa dengan
bagian sehingga memudahkan dalam menggunakan plugins.
pengelolaannya. Disamping itu menggunakan
component akan membuat kode kita lebih
efisien dan menghindari pengulangan menulis
kode, karena component bisa digunakan
berkali-kali.
Routing
Pada bab ini kita akan belajar tentang Vue Router memiliki beberapa fitur
routing yaitu bagaimana mekanisme diantaranya:
• Route/view bertingkat
akses aplikasi berbasis Vue.
• Modular, konfigurasinya berbasis
component
Untuk menangani routing, Vue secara • Mendukung params, query, wildcards pada
official membuat pustaka bernama route
Vue Router. Pustaka ini dapat • Mendukung efek transisi saat perpindahan
diintegrasikan secara baik tentunya halaman / route
• Menangani pengontrolan akses dengan
dengan Vue untuk membuat Single
baik
Page Applications
• Link routenya otomatis terhubung dengan
CSS class active.
• Mendukung HTML5 history mode atau
hash mode, dengan auto-fallback di IE9
• Mendukung fitur scroll dan kustomisasinya
Kita bisa mengunduh pustaka Vue Router mari kita buat satu folder tersediri untuk
pada tautan ini https://unpkg.com/vue-router, belajar routing, misalnya folder routing. Buat
atau bisa juga menunjuk ke versi spesifiknya file index.html dan includenya pustaka Vue
https://unpkg.com/[email protected]/dist/vue- dan Vue Router.
router.js.
Untuk bekerja dengan Vue Router, ada dua
component penting yang akan kita gunakan
Pustaka Vue Router ditambahkan setelah yaitu router-link dan router-view. router-link
pustaka Vue. berfungsi menggenerate menu link,
<script src="lib/vue.js"></script> sedangkan router-view berfungsi sebagai
tempat penampung component yang
<script src="lib/vue-router.js"></scrip
ditampilkan. Disamping kita kita perlu
mendeklarasikan class VueRouter dan
mendefiniskan routing aplikasi kita
contoh cara mendeklarasikan router-link dan // definisikan konfigurasi component
const Home = { template: '<div>Halaman Home</div>' }
router-view pada template. const About = { template: '<div>Halaman About</div>' }

<div id="app"> // mapping route path dengan componentnya, dibaca dari atas ke
bawah
<p>
<router-link to="/">Home</router-link>
const routes = [
<router-link to="/about">About</router-link> { path: '/', component: Home, alias: '/home' },
</p> { path: '/about', component: About }
<router-view></router-view> ]
</div> // register routing aplikasi kita pada objek dari class VueRouter
const router = new VueRouter({
routes // bentuk pendek dari `routes: routes`
})
// register objek router pada objek Vue
var vm = new Vue({
el: '#app',
router,
})
Bagaimana jika path tidak ditemukan? misalnya
user mengakses URL /contact-us Jadi ketika kita mengakses URL /contact-us maka Vue
Router akan meredirect ke URL /.
Jika hal itu terjadi maka tidak akan ada component
yang dimuat karena tidak ada path dalam mapping Dengan menggunakan Vue Router ini maka seluruh
yang sesuai. Untuk mengatasi hal ini, maka kita routing yang pernah kita klik akan tersimpan di-history
perlu menghandle URL apapun dan meredirectnya browser sehingga ketika user mengklik button back,
ke URL / jika tidak ada yang sesuai. Gunakan path URL akan sesuai dengan routing yang terakhir kali
* yang akan sesuai dengan url apapun diakses.
Dynamic Routing
Kita bisa menyertakan parameter pada routing Hanya saja jika jumlah data bukunya sangat banyak
sehingga menjadikan routing menjadi dinamis. maka tentu sangat tidak efisien jika kita harus
definisikan satu persatu. Oleh karena itu, Vue Router
Misalnya path book/1 untuk buku dengan id 1, path menyediakan cara untuk mengatasi hal ini, yaitu
book/2 untuk buku dengan id 2, dst. Maka dengan menggunakan parameter yang diawali dengan
sebenarnya kita bisa tuliskan seperti berikut ini. simbol :. Berikut ini contohnya:
Membuat BooksComponent
Component ini berfungsi menampilkan
daftar buku. Supaya lebih rapi pada
tutorial ini deklarasi component buku
akan letakkan pada file terpisah.

Buat file BooksComponent.js pada


direktori yang sama dengan file
index.html
Component ini akan menampilkan daftar judul buku Kemudian, tentu saja pada template kita tambahkan
menggunakan directive perulangan v-for, di mana router-link untuk mengakses component ini.
pada setiap itemnya akan ditampilkan router-link yang
URL pathnya memiliki format /book/BOOK_ID
Pada file utama index.html, import component
BooksComponent sebagai berikut:

Selanjutnya, mari kita daftarkan component ini pada


mapping routing yang telah kita sebelumnya.
Setelah membuat BooksComponent yang
berfungsi menampilkan link daftar judul buku.
Maka selanjutkan kita perlu membuat satu
component lagi untuk menampilkan data
detail buku sesuai dengan buku yang dipilih
pada BooksComponent.

Misalnya jika diklik link buku Mastering


PostgreSQL 10 maka akan menampilkan
detail dari buku tersebut. Buat file
BookComponent.js.
Pada kode di disamping, tepatnya properti
computed, data books yang berformat list
difilter dengan cara membandingkan id buku
book.id dan parameter id yang dilewatkan
melalui URL this.$route.params.id.

Pada file utama index.html, import component


BookComponent,
Daftarkan component ini pada mapping routing.

Perhatikan path book/:id, ini adalah path dinamis dimana parameter id bersifat dinamis sesuai dengan link
pada router-linknya. Nah, untuk mengaksesnya kita bisa gunakan kode this.$route.params.id.
Nama parameternya bebas, tidak harus id untuk data id. Artinya pada contoh di atas, boleh saja kita ganti
dengan path book/:kode, maka untuk mengakses parameternya menjadi this.$route.params.kode.
Programmatic Navigation
Disamping menggunakan element router-link Method ini berfungsi sama dengan ketika kita mengklik
yang menampilkan link untuk menuju ke path link , oleh karena itu klik setara dengan memanggil
tertentu, kita juga dapat menjalankan method router.push(...).
dari objek Vue Router untuk meredirect
halaman ke path tertentu. Berikut ini contoh variasi pemanggilan method ini.

Method tersebut adalah method push()


Untuk mencoba method ini, kita akan uji coba, akses URL ini http://localhost/book-
gunakan contoh sebelumnya, di mana jika laravue/routing/index.html#/book/1 di mana tidak ada
pada detail buku atau component buku dengan id 1, maka halaman akan menampilkan
BookComponent ternyata buku dengan id pesan bahwa buku tidak ada kemudian diredirect ke
yang dikirimkan tidak ditemukan maka halaman daftar buku BooksComponent
halaman akan diredirect ke path books atau
component BooksComponent.
Kita juga bisa mengakses history URL dengan
menggunakan method go.

Sebagai catatan: method router.push, router.replace dan


router.go adalah wrapper dari Browser History APIs yaitu
window.history.pushState, window.history.replaceState dan
window.history.go.
Penamaan Routing
Untuk mengidentifikasi suatu route kita bisa
menggunakan nama, dibanding menggunakan
path-nya.

Tambahkan key name pada mapping route

Untuk membuat link ke route tersebut kita bisa


gunakan kode berikut:
<router-link :to="{ name: 'book', params: { bookId: 123 }}">Mastering Vue</router-link>

Atau jika menggunakan method push kita bisa gunakan kode


berikut
router.push({ name: 'book', params: { bookId: 123 }})
Mengirimkan Props ke Component Routing
Kita bisa mengirimkan props kepada component
routing, melalui properti props pada saat mapping
routes.

Pada contoh terdahulu, kita akan sedikit ubah


component BookComponent untuk
mensimulasikan penggunaan props ini.
Buka file BookComponent.js, tambahkan properti
props dengan nilai id, dan gunakan untuk memfilter
data books dengan cara mengganti this.
$route.params.id menjadi this.id
Kemudian pada mapping route,
tambahkan key props yang bernilai
true
Transitions Effect
Sebagaimana bahasan pada dynamic
component, pada routing ini kita juga bisa
menerapkan atau menambahkan efek transisi
antara route dengan sedikit animasi. Caranya
masih sama yaitu menggunakan elemen
<transition>.

Pada template kita bungkus router-view


dengan transition
Navigation Guards
Vue Router memungkinkan kita menolak atau Setiap fungsi guard mempunyai tiga
mengizinkan akses ke suatu route. Misalkan argumen:
ada halaman yang hanya boleh diakses
ketika user sudah login. • to: Route: target route (path) di mana
halaman akan diredirect.
Ada tiga cara untuk mendefinisikan navigation • from: Route: current route asal.
guards, yaitu: secara global, per-route, atau • next: Function: fungsi ini hasrus dipanggil
dalam component. untuk menyelesaikan hook. Aksinya
tergantung pada argumen yang dilewatkan
via next.
– next(): navigasi akan dilanjutkan.
– next(false): navigasi akan dibatalkan.
– next('/') or next({ path: '/' }): redirect ke route
lain.
– next(error): (2.4.0+) navigasi akan dibatalkan
dan error akan dikirimkan ke callbacks via
router.onError().
Global
Berikut ini sintak untuk mendeklarasikan route
guard secara global artinya guard akan
berlaku untuk semua route
Per Route

Guard juga bisa


diimplementasikan untuk
routing tertentu saja. Berikut
ini sintaksnya
Dalam Component
Kita juga bisa mendeklarasikan guard
di dalam component. Sebagai berikut:
Prevent Leave Accident
Pada bagian berikutnya kita telah belajar di mana
kita meletakkan implementasi guard. Sekarang kita
akan coba mengimplementasikan contoh
penggunaan navigation guard ini untuk hal yang
simple yatu untuk mencegah pengguna keluar dari
suatu halaman hanya karena salah klik (tidak
sengaja).

Nah, pada contoh ini kita akan menampilkan pesan


konfirmasi untuk memastikan bahwa pengguna
memang benar-benar ingin keluar atau berpindah
dari halaman tersebut.

Kita akan mencoba melalui deklarasi dalam Kode di atas, kita akan menampilkan dialog confirm. Jika
component menggunakan hook beforeRouteLeave. pengguna setuju atau mengkonfirmasi dialog tersebut
Pada BookComponent, tambahkan properti ini. maka halaman akan diredirect keluar atau next route, jika
tidak setuju maka akan tetap pada halaman tersebut
next(false)
Authentication Route
Contoh implementasi lain dari navigation guards,
adalah kita bisa mencegah user yang tidak
memiliki hak akses untuk mengakses suatu route /
halaman tertentu.

Untuk melakukan hal itu, pertama kali kita perlu


definisikan pada mapping route, mana saja route
yang hanya boleh diakses oleh misalnya user yang
sudah login. Vue Router telah menyediakan key
meta yang bisa kita manfaatkan sebagai penanda
routing.

Misalnya, route atau halaman about hanya boleh


diakses oleh user yang sudah login, maka kita
tambahkan saja meta login yang bernilai true
(bebas saja nama metanya).
Kemudian navigation guard bisa kita
definisikan secara global
State Management
Apa itu state management?
State management merupakan sentralisasi
variabel data, sehingga semua component
dalam aplikasi dapat mengakses dan
memanipulasinya dengan aturan-aturan
tertentu sehingga perubahannya dapat
diprediksi.

contoh : aplikasi counter sederhana berbasis


Vue.
Kode pada aplikasi counter di atas memiliki tiga bagian utama.
State, atau data yang dijadikan sebagai sumber utama yang
digunakan oleh aplikasi;

• View, deklarasi mapping dari state, di mana dan bagaimana


state akan ditampilkan;
• Actions, jalan untuk mengubah state ketika user melakukan
tindakan pada view.
• Berikut ini diagram yang menjelaskan konsep di atas (one
way data flow)
Pustaka Vuex menangani dan terdiri dari 3 Instalasi Vuex
hal utama yaitu state, mutation dan action. Sebagai sebuah pustaka JS seperti Vue
Cara kerja Vuex adalah: Router, Vuex juga perlu ditambahkan ke
• Mula-mula suatu component melakukan dalam halaman HTML kita.
dispatch (pemanggilan) kepada suatu File pustaka bisa kita unduh ke lokal
fungsi pada actions; (sehingga tidak membutuhkan koneksi
• Actions yang berisi kumpulan fungsi internet lagi) atau ditautkan
tersebut bertugas memanggil fungsi pada langsung dengan server pustaka Vue (CDN).
mutation;
• Fungsi-fungsi pada mutation bertugas
mengupdate state.
• Perubahan pada state yang bersifat reaktif
akan memicu rendering component.
Instalasi Dev Tools
Tools dev-tools ini merupakan extension pada
browser (Chrome, Firefox) untuk debugging
aplikasi berbasis Vue. Jika kita bermain
dengan Vuex, maka tools ini sangat
disarankan

State atau data pada Vuex disimpan dalam


sebuah objek yang disebut dengan store.
Tidak hanya menyimpan state, namun store
juga bertanggung jawab atas perubahan
state, dan perubahannya tersebut bersifat
reaktif sehingga bisa digunakan untuk
memicu render ulang suatu View yang
menggunakan state
penggunaan Vuex

Catatan: data state merupakan data sementara yang tersimpan


dalam memori yang dialokasikan untuk variabel javascript (non
persisted), artinya ketika browser di refresh maka data state akan
tereset ke data awalnya. Ke depan jika diperlukan, kita bisa
menggunakan client storage (misal: local storage) untuk
menyimpan data state
Mengakses Store Via Component
Untuk mengakses store via objek Vue kita memang
bisa menggunakan perintah store.state.counter
atau store.commit('increment'), sebab Vuex store
dideklarasikan dalam satu file yang sama dengan
objek Vue. Lalu bagaimana jika kita menggunakan
component yang terpisah filenya dengan Vuex
store?

Contoh : buat component baru misalnya bernama


Hello yang berfungsi menampilkan state counter
(nama filenya: Hello.js)
Kemudian pada file utama, kita import component ini.
Hasilnya akan muncul error yang
menyebutkan bahwa varaibel store tidak
didefinisikan di dalam component
Hello.
Lalu pada objek Vue, registerkan component Hello
serta ubah properti template dengan menambahkan
elemen <hello>, adapun kode lainnya masih tetap
sama.

tapi perubahan state pada devtools tetap tercatat


karena perintah commit state dilakukan di objek Vue
bukan di component Hello
Untuk mengatasi hal ini, Vuex menyediakan
mekanisme untuk menginjek atau meregister Vuex
store pada objek Vue sehingga bisa digunakan Kemudian pada component, kita bisa gunakan
pada seluruh component dibawah objek Vue perintah this.$store untuk mengakses store.
tersebut. Hal ini sebenarnya hampir sama dengan
register component secara local.
Getters
Vuex store sebenarnya juga memiliki properti Untuk memanggilnya pada computed, kita bisa
getters sehingga pemanggilan state tidak langsung menggunakan perintah store.getters.counter,
menembak state-nya (store.state.counter) Oleh karenanya kita bisa ubah cara
melainkan melalui perantaraan fungsi getter di pemanggilannya pada properti computed
store tersebut

implementasi getters ini tidak hanya mereturn satu


state saja melainkan beberapa state sekaligus dan
bisa juga ditambahkan dengan operasi tertentu
sehingga akan lebih efisien jika kita buatkan fungsi
getters sendiri.
Mutations
Mutations merupakan kumpulan fungsi untuk
memanipulasi state atau bisa juga disebut sebagai
setter. Tiap fungsi mutations memiliki minimal dua Kita juga dizinkan menambahkan argumen
hal yaitu type dan handler, di mana type (payload) pada fungsi ini.
merupakan nama fungsinya dan handler
merupakan state.

fungsi dalam mutation seharusnya bersifat


synchronous supaya mudah dalam memantau
perubahan state. Perubahan state pada mutation
harus dilakukan pada saat itu juga, tidak boleh
menunggu satu detik pun
Actions
Vuex juga memiliki properti actions. Actions
sebenarnya mirip dengan mutations, namun
perbedaanya adalah:
• Actions bertugas meng-commit mutations.
• Actions mendukung operasi
asynchronous.
Lalu cara memanggilnya pada objek Vue atau
component, yang sebelumnya menggunakan perintah
store.commit('increment') maka kita ubah menjadi
store.dispatch('increment').
Asynchronous Actions
Berbeda dengan mutation, fungsi-fungsi pada Adapun kerangka dari objek Promise adalah
actions bisa dibuat asynchronous, misalnya sebagai berikut.
pada kasus pemanggilan data dari server
yang tentu membutuhkan waktu. Caranya,
kita menggunakan Promise sebagai
return value dari fungsi pada actions.
Wah, apa itu promise? promise artinya janji,
ini sebuah term di JS yang memungkinkan
kita menunggu suatu proses yang dilakukan
secara asynchronous dan kita dipastikan
akan mendapatkan feedback balik dari
proses itu, baik berhasil maupun gagal.
untuk mensimulasikan
asynchronous action maka
kita bisa gunakan data
JSON buku (dummy)
Data JSON ini kemudian bisa kita hosting ke
https://jsonbin.io untuk sekedar uji coba saja.

Pada website https://jsonbin.io, masukkan data JSON


tersebut pada kolom input yang disediakan lalu
klik button Create maka akan digenerate API dari data
tersebut yang bisa kita akses (dalam hal ini) melalui
Access URL ->
http://api.jsonbin.io/b/5b42acd44d5ea95c8ba22392
Setelah data json siap, langkah berikutnya kita
siapkan kerangka store menjadi sebagai berikut
Kita siapkan dulu kerangka state books,
mutations setBooks, action getBooks dan
getters books.
Kita masih akan menggunakan pustaka
XMLHTTP untuk merequest data JSON buku
dan kodenya tersebut akan kita bungkus
menggunakan Promise pada actons
getBooks() agar mendukung asynchronous.
Kira-kira kode action getBooks menjadi
sebagai berikut:

Kode di atas akan merequest data buku pada jsonbin.io dengan metode GET
xhr.open("GET", "http://api.jsonbin.io/b/5b42acd44d5ea95c8ba22392");.
Kemudian jika permintaan data sukses if (this.status >= 200 && this.status <
300) maka data tersebut akan dicommit ke mutation setBooks, tentunya karena
data berformat JSON maka kita perlu parsing atau konversi ke bentuk objek
atau array Javascript menggunakan JSON.parse
Kemudian pada objek Vue atau component,
tepatnya pada hook created kita bisa
melakukan dispatch action getBooks dan
pada computed kita perlu buat fungsi books
yang memanggil getters books pada store,
sebagai berikut
Selanjutnya pada template,
kita gunakan teknik list
rendering
Menangani Two Way Data Binding
Kita tau bahwa sifat dari v-model itu ada dua yaitu
getter dan setter, artinya ketika kita mengisi teks
pada field input maka variabel data akan diset
sesuai dengan teks isian kita (setter), sebalik jika
variabel data diubah maka isian field input juga
akan mengikuti perubahan pada variabel data
tersebut (getter).

Lalu bagaimana menghubungkan dengan state


padahal state pada objek di definisikan sebagai
getter di properti computed bukan di properti data?

Mari kita simulasikan dengan membuat state name


dan field inputnya

Anda mungkin juga menyukai