Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Vue

Mengenal Directive pada VueJS

Posting Komentar
mengenal-directive

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 :

  1. v-text
  2. v-once
  3. v-html
  4. v-bind
  5. Two-way binding using v-model
  6. v-if
  7. Loops
  8. Events

v-text

Directive yang dapat digunakan untuk menampilkan string, fungsinya sama seperti double bracket atau mustache contoh :
 <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 : 

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

v-html

Directive yang dapat digunakan untuk menampilkan kode html yang berasal dari data, contoh penulisan :
<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: 

<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 :
<!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 :

two-way-binding

v-if

Directive yang digunakan untuk merender atau tidak suatu elemen,contoh :
<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 : 

<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 :

<!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 :

vue-conditional-expression

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

<!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 :

vue-display-array

Menampilkan Objek 

<!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 :

vue-display-object

Posting Komentar untuk "Mengenal Directive pada VueJS"