toc-vue-bab-1-8

- [Table of Content](#table-of-content)
- [Mengenal Vue](#mengenal-vue)
    - [Apa itu Vue?](#apa-itu-vue)
    - [Sejarah Vue](#sejarah-vue)
    - [Mengapa Memilih Vue?](#mengapa-memilih-vue)
        - [Framework Javascript Populer](#framework-javascript-populer)
        - [Didukung Banyak Pustaka](#didukung-banyak-pustaka)
        - [Bukan One Man Show](#bukan-one-man-show)
        - [Digunakan Perusahaan Besar](#digunakan-perusahaan-besar)
        - [Mudah Dipelajari](#mudah-dipelajari)
        - [Mudah Diintegrasikan dengan Pustaka Lain](#mudah-diintegrasikan-dengan-pustaka-lain)
        - [Dukungan Official untuk Pengembangan Aplikasi Enterprise](#dukungan-official-untuk-pengembangan-aplikasi-enterprise)
    - [Fitur Utama](#fitur-utama)
        - [Virtual DOM](#virtual-dom)
        - [Component Base](#component-base)
        - [Template](#template)
        - [Modularity](#modularity)
        - [Reactivity](#reactivity)
        - [Routing](#routing)
        - [State Management](#state-management)
    - [Develompent Tools](#develompent-tools)
    - [Instalasi & Konfigurasi](#instalasi-konfigurasi)
    - [Hello World](#hello-world)
    - [Menguji Reaktifitas](#menguji-reaktifitas)
    - [Kesimpulan](#kesimpulan)
- [Dasar-Dasar Vue](#dasar-dasar-vue)
    - [Objek Vue](#objek-vue)
        - [Inisiasi Objek Vue](#inisiasi-objek-vue)
        - [Properti el](#properti-el)
        - [Properti Data](#properti-data)
    - [Siklus Objek Vue](#siklus-objek-vue)
        - [create](#create)
        - [mount](#mount)
        - [update](#update)
        - [destroy](#destroy)
    - [Penulisan Template](#penulisan-template)
        - [Data Teks](#data-teks)
        - [Data Raw HTML](#data-raw-html)
        - [Data Attribute](#data-attribute)
        - [JavaScript Expression](#javascript-expression)
        - [Properti Template](#properti-template)
    - [Properti Methods, Computed, & Filters](#properti-methods--computed--filters)
        - [Properti Methods](#properti-methods)
        - [Properti Computed](#properti-computed)
        - [Properti Filters](#properti-filters)
            - [Argumen Pada Filters](#argumen-pada-filters)
            - [Chaining Filters](#chaining-filters)
            - [Deklarasi Filters Secara Terpisah](#deklarasi-filters-secara-terpisah)
    - [Kesimpulan](#kesimpulan)
- [Directive](#directive)
    - [Mengenal Directive](#mengenal-directive)
        - [v-html](#v-html)
        - [v-once](#v-once)
        - [v-text](#v-text)
        - [v-show](#v-show)
        - [v-if](#v-if)
        - [v-on](#v-on)
        - [v-bind](#v-bind)
    - [Kesimpulan](#kesimpulan)
- [List](#list)
    - [Menampilkan Data Array](#menampilkan-data-array)
        - [v-for Menggunakan Tag Template](#v-for-menggunakan-tag-template)
        - [v-for Menggunakan Index](#v-for-menggunakan-index)
    - [Menampilkan Data Objek](#menampilkan-data-objek)
    - [Menampilkan Data Collection](#menampilkan-data-collection)
    - [Atribut Key](#atribut-key)
    - [Membatasi v-for menggunakan v-if](#membatasi-v-for-menggunakan-v-if)
    - [Perubahan (mutation) Data Pada Array](#perubahan-mutation-data-pada-array)
        - [push() & pop()](#push-pop)
        - [unshift() & shift()](#unshift-shift)
        - [sort() & reverse()](#sort-reverse)
        - [splice()](#splice)
        - [fungsi set pada Vue](#fungsi-set-pada-vue)
    - [Perubahan Data Pada Objek](#perubahan-data-pada-objek)
    - [Kesimpulan](#kesimpulan)
- [Form](#form)
    - [Input Binding](#input-binding)
        - [Text](#text)
        - [Boolean](#boolean)
        - [Array](#array)
    - [Filtering Data List](#filtering-data-list)
    - [Handling Submit Form & Validation](#handling-submit-form-validation)
        - [Validasi Data](#validasi-data)
        - [Prepare Data Submit](#prepare-data-submit)
        - [Send Data To Server](#send-data-to-server)
    - [Handling File Upload](#handling-file-upload)
    - [Kesimpulan](#kesimpulan)
- [Component](#component)
    - [*Component* Dasar](#component-dasar)
        - [Component Naming](#component-naming)
        - [Component Registration](#component-registration)
            - [Global Component](#global-component)
            - [Local Component](#local-component)
        - [Deklarasi Properti Data](#deklarasi-properti-data)
        - [Reusable Component](#reusable-component)
    - [Component Lanjutan](#component-lanjutan)
        - [Passing Data To Component](#passing-data-to-component)
        - [Directive Pada Component](#directive-pada-component)
        - [Update Data Parent From Component](#update-data-parent-from-component)
        - [Two Way Data Binding on Component](#two-way-data-binding-on-component)
        - [Content Distribution with Slots](#content-distribution-with-slots)
        - [Single File Component](#single-file-component)
        - [Dynamic Components](#dynamic-components)
    - [Transition Effect](#transition-effect)
    - [Mixins](#mixins)
    - [Plugins](#plugins)
        - [Deklarasi Plugins](#deklarasi-plugins)
        - [Menggunakan Plugin](#menggunakan-plugin)
    - [Kesimpulan](#kesimpulan)
- [Routing](#routing)
    - [Features](#features)
    - [Installation](#installation)
    - [Getting Started](#getting-started)
    - [Dynamic Routing](#dynamic-routing)
        - [Component BooksComponent](#component-bookscomponent)
        - [Component BookComponent](#component-bookcomponent)
    - [Programmatic Navigation](#programmatic-navigation)
    - [Penamaan Routes](#penamaan-routes)
    - [Passing Props To Route Component](#passing-props-to-route-component)
    - [Transitions Effect](#transitions-effect)
    - [Navigation Guards](#navigation-guards)
        - [Global](#global)
        - [Per Route](#per-route)
        - [Dalam Component](#dalam-component)
        - [Prevent Leave Accident](#prevent-leave-accident)
        - [Authentication Route](#authentication-route)
    - [Kesimpulan](#kesimpulan)
- [State Management](#state-management)
    - [Mengenal State Management](#mengenal-state-management)
    - [Pustaka State Management](#pustaka-state-management)
    - [Instalasi](#instalasi)
    - [Dev Tools](#dev-tools)
    - [Getting Started](#getting-started)
    - [Mengakses Store Via Component](#mengakses-store-via-component)
    - [Getters](#getters)
    - [Mutations](#mutations)
    - [Actions](#actions)
    - [Menangani Two Way Data Binding](#menangani-two-way-data-binding)
    - [Mapping Store](#mapping-store)
        - [Mapping State](#mapping-state)
        - [Mapping Getters](#mapping-getters)
    - [Client Storage](#client-storage)
    - [Kesimpulan](#kesimpulan)