Mengenal Directive pada VueJS

Directive adalah atribut khusus yang dimasukan pada elemen HTML sebagai tanda bahwa elemen tersebut akan dilakukan aksi tertentu oleh Vue. Directive berbentuk ekspresi Javascript yang secara reaktif menerapkan efek ketika nilainya berubah. Penulisan atribut directive pada vue diawali dengan prefix v-, berikut adalah directive yang ada pada Vue :

v-text
v-once
v-html
v-bind
Two-way binding using v-model
v-if
Loops
Events

v-text

Directive yang dapat digunakan untuk menampilkan string, fungsinya sama seperti double bracket atau mustache contoh :

Code Snippet

<div id="app">
    <p v-text="pesan"></p> <!-- directive text sama dengan -->
    <p>{{ pesan}}</p>     <!-- sama dengan double brackets/mustache-->      
 </div>

v-once

Directive yang digunakan agar nilai variabel pada template tidak bisa diubah, v-once hanya dirender satu kali oleh vue, pada render berikutnya akan diskip/dilewati seingga nilainya akan tetap sama, contoh :

Code Snippet

<p v-once>{{ pesan }}</p>

v-html

Directive yang dapat digunakan untuk menampilkan kode html yang berasal dari data, contoh penulisan :

Code Snippet

<p v-html="pesan"></p>

v-bind

Directive yang digunakan untuk untuk membinding atribut html atau komponen agar nilainya terupdate secara sesuai dengan datanya, contoh:

Code Snippet

<div id="app">
<img v-bind:src="photo">
</div>

Two-way binding using v-model

Melakukan binding secara dua arah karena sudah saling terhubung, misalkan kita mempunyai dua buah inputan jika pada salah satu kita input maka input yang satunya lagi otomatis akan terisi, begitu juga sebaliknya. contoh :

Code Snippet

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Two-Way Binding</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <form>
            <input type="text" name="judul" v-model="judul" placeholder="masukkan
            judul">
            {{ judul }}
            <br>
            <textarea name="keterangan" v-model="keterangan" placeholder="masukkan keterangan"></textarea>
            {{ keterangan }}
        </form>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                judul: '',
                keterangan: ''
            },
        })
    </script>
</body>
</html>

hasilnya :

v-if

Directive yang digunakan untuk merender atau tidak suatu elemen,contoh :

Code Snippet

<h1 v-if="tampilkan">{{ judul }}</h1>

variabel tampilkan bisa kita buat menjadi tipe data boolean, jika bernilai true maka text judul akan tampil dan sebaliknya jika bernilai false text judul tidak akan tampil, selain menggunakan v-if kita juga dapat menggunakan v-else, contoh :

Code Snippet

<h1 v-if="tampilkan">{{ judul}}</h1>
<h1 v-else>Tidak ada</h1>

Sehingga jika variabel tampilkan bernilai false akan masuk kedalam logika else yaitu “Tidak ada”.

Selain v-else vue juga menyediakan v-else-if contoh penggunaan :

Code Snippet

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Two-Way Binding</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="nilai === 'A'">
            Amat baik
        </div>
        <div v-else-if="nilai === 'B'">
            Baik
        </div>
        <div v-else-if="nilai === 'C'">
            Cukup
        </div>
        <div v-else>
            Kurang
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                nilai: "A",
            },
        })
    </script>
</body>

</html>

hasilnya :

v-for

v-for biada digunakan untuk melakukan looping, biasa digunakan untuk menampilkan pengulangan, pada contoh kali ini kita akan menampilkan data dalam bentuk array dan objek, menggunakan v-for contoh :

Menampilkan array

Code Snippet

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Looping</title>
    <script src="lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="buku in judul">
            {{ buku }}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                judul: [
                    'Bahasa Indonesia',
                    'IPA',
                    'Matematika',
                    'Inggris',
                    'Kimia'
                ]
            }
        })
    </script>
</body>

</html>

hasilnya :

Menampilkan Objek

Code Snippet

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Looping</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="buku in judul">
                {{ buku }}
            </li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                judul: {
                    id: 1001,
                    judul: 'Matematika',
                    deskripsi: 'Buku panduan guru IPA SMK',
                    penulis: 'Andre Tauaja',
                    tahun: 2020,
                    harga: 120000,
                }
            }
        })
    </script>
</body>
</html>

hasilnya :

v-text

v-once

v-html

v-bind

Two-way binding using v-model

v-if

v-for

Menampilkan array

Menampilkan Objek

Tinggalkan Balasan Batalkan balasan