Menggunakan Beberapa Directive pada Vue

Pada artikel atau bagian dari seri ini, kita akan membahas beberapa contoh kode dengan menambahkan beberapa Directive dari Vue.

Vue Directive merupakan salah satu jenis perintah spesial yang dapat ditambahkan kedalam konten HTML dan sering terlihat sebagai atribut prefix dari HTML. Disini, kita akan menggunakan Directive v-on seperti yang telah kita pelajari pada bagian sebelumnya.


Event-Handling dengan v-on

Directive v-on dapat kita gunakan untuk membuat Event Listener dalam DOM agar kita dapat melakukan suatu hal ketika terdapat Event tertentu.

Pada bagian kedua dari seri ini, kita telah menggunakan Directive v-on untuk memanggil Metode Instance ubahSalam() tepat ketika tombol telah di klik. Contoh:

<button v-on:click="ubahSalam">
    Ubah Salam
</button>


Sama seperti Triggering suatu metode pada Instance, kita juga dapat menggunakan Inline JavaScript pada Template. Contoh:

<button v-on:click="salam = 'Halo Semuanya!'">
    Ubah Salam
</button>


Kedua contoh kode diatas akan bekerja dengan sempurna dengan cara memanggil methods.

Sangat penting untuk diingat bahwa Directive v-on dapat digunakan dengan semua Event DOM asli. Contoh:

<h1 v-on:click="metode">Klik Disini!</h1>
<h1 v-on:dblclick="metode">Klik Disini Saja!</h1>
<form v-on:submit="metode">...</form>
<input v-on:keydown="metode" placeholder="Ketik disini saja" />
<input v-on:keyup="metode" placeholder="Jangan, ketik disini saja lah" />
<!-- ... -->


Berikut adalah contoh kode yang dapat menampilkan beberapa Event-Listener yang berbeda-beda:
./index.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>
<body>
    <div id="aplikasi">
        <h2>{{ salam }}</h2>
        <p>{{ peringatan }}</p>
        <button v-on:click="ubahSalam">
            Ubah Salam
        </button>
        <button v-on:dblclick="ubahSalam">
            Klik dua kali untuk mengubah Salam
        </button>

        <input v-on:keyup="pesanSalamPeringatan" placeholder="Ketikkan sesuatu" />
        <input v-on:keyup.enter="pesanEnterPeringatan"placeholder="Ketikkan sesuatu dan tekan Enter" />
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>
</html>


./main.js

new Vue({
    el: '#aplikasi',
    data: {
        salam: 'Halo Semuanya!',
        peringatan: ''
    },
    methods: {
        ubahSalam() {
            this.salam = this.salam === 'Halo Semuanya!' ?
            'Halo Gaes!' :
            'Halo Semuanya!';
        },
        pesanSalamPeringatan() {
            this.peringatan = 'Anda telah mengetik sesuatu...';
        },
        pesanEnterPeringatan() {
            this.peringatan = 'Anda telah mengetik sesuatu dan menekan tombol Enter...';
        },
    }
});

 Event-Handling dengan v-on

Lihat kode di Github | Lihat Live Demo

Dari contoh kode dan hasil dari kode diatas, kalian akan melihat Directive v-on yang juga digunakan pada Event keyup.enter. keyup.enter adalah salah satu Key Modifier unik yang disediakan oleh Vue untuk membuat reaksi kedalam Event dari tombol yang sering digunakan pada Keyboard seperti Enter.

Biasanya, Event-Handler memiliki sebuah objek Event yang terdiri dari rincian Event. Pada Directive v-on, kita dapat mengakses objek Event asli tersebut dengan memasukkan variabel $event. Contoh:

<h1 v-on:click="metode($event)">Klik Disini!</h1>


Directive v-on diatas biasanya digunakan untuk mendeteksi dan meng-handle Event pada aplikasi Vue.

Attribute Binding dengan v-bind

Cara termudah untuk membuat Data-Binding pada Vue adalah dengan menggunakan Mustache Syntax (Tanda kurawal) yang biasanya digunakan untuk mengikat (Binding) nilai data pada teks konten dari elemen HTML.

Pada contoh kode yang telah kita lihat pada bagian pertama dan kedua, kita telah menggunakan Mustache Syntax untuk mem-Binding properti salam, nama, dan jabatan yang telah di tentukan pada Instance kedalam Template:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>
<body>
    <div id="aplikasi">
        <h2>{{ salam }}</h2>
        <p>Salam dari {{ nama }} yang merupakan {{ jabatan }} di EL Creative Academy.</p>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>
</html>


Disini, kita tidak dapat menggunakan Mustache Syntax untuk mem-Binding data kedalam atribut standar HTML seperti href, id, src, dll. Untuk mem-Binding atribut HTML, Vue menyediakan sebuah Directive v-bind.

Berikut adalah contoh penggunaan Directive v-bind yang berfungsi untuk mem-Binding sebuah properti data (bernama gambarOrganisasi) ke atribut src dari elemen img:
./index.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>
<body>
    <div id="aplikasi">
        <h2>{{ salam }}</h2>
        <p>Salam dari {{ nama }} yang merupakan {{ jabatan }} di EL Creative Academy.</p>
        <img v-bind:src="gambarOrganisasi" />
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>
</html>


./main.js

new Vue({
    el: '#aplikasi',
    data: {
        salam: 'Halo Semuanya!',
        nama: 'Yasya El Hakim',
        jabatan: 'Author',
        gambarOrganisasi: 'https://1.bp.blogspot.com/-3fxYMPSkglE/XXEqoYT86tI/AAAAAAAAGgM/cBLLnuer9kQppe2hH-IwpLSqr4Qsa0U2wCLcBGAs/s1600/ELC.jpg'
    }
});


gambarOrganisasi akan langsung terkait dengan sebuah gambar yang kemudian akan langsung ditampilkan.

 Attribute Binding dengan v-bind

Lihat kode di Github | Lihat Live Demo

Conditional Rendering dengan v-if atau v-show

Terkadang, kita mungkin ingin menggunakan Conditional Rendering berdasarkan konten pada nilai dari suatu ekspresi. Pada Vue, kita dapat melakukannya dengan menggunakan bantuan dari Directive v-if dan v-show.

Untuk menggunakan Conditional Rendering, pertama-tama mari kita tambahkan sebuah tombol kedalam contoh kode yang telah kita buat sebelumnya - yang berfungsi untuk mengubah nilai dari properti nama dan gambar:
./index.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>
<body>
    <div id="aplikasi">
        <h2>{{ salam }}</h2>
        <p>Salam dari {{ nama }} yang merupakan {{ jabatan }} di EL Creative Academy.</p>
        <img v-bind:src="gambarOrganisasi" />

        <button v-on:click="ubahNama">
            Ubah Nama
        </button>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>
</html>


./main.js

new Vue({
    el: '#aplikasi',
    data: {
        salam: 'Halo Semuanya!',
        nama: 'Yasya El Hakim',
        jabatan: 'Author',
        gambarOrganisasi: 'https://1.bp.blogspot.com/-3fxYMPSkglE/XXEqoYT86tI/AAAAAAAAGgM/cBLLnuer9kQppe2hH-IwpLSqr4Qsa0U2wCLcBGAs/s1600/ELC.jpg'
    },
    methods: {
        ubahNama() {
            if (this.nama === 'Yasya El Hakim') {
                this.nama = 'Agung Cahyadi';
                this.gambarOrganisasi = 'https://1.bp.blogspot.com/-pJdVpoBJ-Xw/XcAtUqeZb0I/AAAAAAAAHNs/Dm1v55u117k3-qRJir1Ba1218Dg19mT1wCPcBGAYYCw/s1600/VueJS.jpg';
            } else {
                this.nama = 'Yasya El Hakim';
                this.gambarOrganisasi = 'https://1.bp.blogspot.com/-3fxYMPSkglE/XXEqoYT86tI/AAAAAAAAGgM/cBLLnuer9kQppe2hH-IwpLSqr4Qsa0U2wCLcBGAs/s1600/ELC.jpg';
            }
        }
    }
});


Dari kode diatas, pertama-tama metode ubahNama() akan mengecek jika nilai dari properti nama adalah Yasya El Hakim - yaitu benar (true), maka akan mengubah nilai dari properti nama menjadi Agung Cahyadi dan gambarOrganisasi menjadi gambar Vue. Jika informasi dari properti nama telah diubah, maka informasi dari ubahNama() akan dikembalikan seperti semula.

Jika kita ingin me-render beberapa konten dalam beberapa kondisi (Contoh, ketika nama === 'Agung Cahyadi'), Directive v-if atau v-show sangatlah berguna. Contoh, kita akan menggunakan dua tag <p> yang terpisah dan terdiri dari Directive v-if untuk menampikan teks deskripsi konten:
./index.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>
<body>
    <div id="aplikasi">
        <h2>{{ salam }}</h2>
        <p v-if="nama === 'Yasya El Hakim'">
            Salam dari {{ nama }} yang merupakan {{ jabatan }} di EL Creative Academy.
        </p>
        <p v-if="nama === 'Agung Cahyadi'">
            Salam juga dari {{ nama }} yang merupakan {{ jabatan }} di EL Creative Academy.
        </p>
        <img v-bind:src="gambarOrganisasi" />

        <button v-on:click="ubahNama">
            Ubah Nama
        </button>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>
</html>


Konten pada tag <p> pertama akan menampilkan teks Salam dari Yasya El Hakim yang merupakan Author di EL Creative Academy. yang hanya akan terender jika nilai dari properti nama adalah Yasya El Hakim. Jika nilai dari properti nama adalah Agung Cahyadi, maka tag <p> kedua akan ditampilkan dan berisi teks Salam juga dari Agung Cahyadi yang merupakan Author di EL Creative Academy..

 Conditional Rendering dengan v-if atau v-show

Lihat kode di Github | Lihat Live Demo

Catatan: Vue juga menyediakan Directive v-else yang dapat menjelaskan Block else dan Directive v-else-if yang dapat menjelaskan Block else-if.

Selain Directive v-if, kita juga dapat menggunakan Directive v-show:
./index2.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>
<body>
    <div id="aplikasi">
        <h2>{{ salam }}</h2>
        <p v-show="nama === 'Yasya El Hakim'">
            Salam dari {{ nama }} yang merupakan {{ jabatan }} di EL Creative Academy.
        </p>
        <p v-show="nama === 'Agung Cahyadi'">
            Salam juga dari {{ nama }} yang merupakan {{ jabatan }} di EL Creative Academy.
        </p>
        <img v-bind:src="gambarOrganisasi" />

        <button v-on:click="ubahNama">
            Ubah Nama
        </button>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>
</html>


v-show

Lihat kode di Github | Lihat Live Demo

Berhubungan dengan fungsi dari kedua directive diatas yang hampir sama, Directive v-if dan v-show berbeda satu sama lain. Directive v-if tidak akan me-render elemen sebelum sampai kondisinya benar (true). Sedangkan Directive v-show akan selalu merender elemen dengan mengontrol property CSS yaitu display tergantung pada kondisinya benar (true).

Directive v-if biasanya paling sering digunakan selama kita tidak ingin selalu menampilkan elemen pada DOM dan tidak ingin menggunakan Toggle antara Menampilkan/Menyembunyikan elemen. Jika kita ingin menggunakan elemen Toggle pada saat Runtime - Directive v-show adalah yang paling cocok.

Shorthand (Mempersingkat) Syntax dengan v-on dan v-bind

Vue juga menyediakan dua Shorthand Syntax (Penulisan yang sederhana/singkat) hanya pada penggunaan Directive v-bind dan v-on. Directive v-bind dapat dipersingkat dengan menggunakan simbol titik dua ":":

<!-- Syntax lengkap -->
<img v-bind:src="propertiData" />

<!-- Shorthand Syntax -->
<img :src="propertiData" />


Directive v-on juga dapat dipersingkat dengan menggunakan simbol "@":

<!-- Syntax lengkap -->
<button v-on:click="namaMetode"></button>

<!-- Shorthand Syntax -->
<button @click="namaMetode"></button>


Shorthand Syntax diatas akan dapat menghasilkan fungsi yang sama. Jadi, pada pembelajaran atau seri selanjutnya kami akan menunjukkan contoh yang menggunakan Shorthand Syntax.

Apakah kalian sudah paham? Jika sudah, kalian sangat luar biasa. Pada bagian selanjutnya, kita akan membahas tentang Directive v-for. Jadi, jangan lupa kembali lagi kesini untuk melanjutkannya yaaa! Terimakasih.

0 Komentar