Categories
VueJS

Belajar Vue JS Bagian 5 : Menggunakan v-once dan v-on

Hallo coder, pada tutorial sebelumnya kita telah membahas Menggunakan if dan else di vue js pada pembahasan kali ini kita akan membahas v-once dan v-on pada Vue js. v-once dan v-on merupakan directive.

Directive merupakan atribut khusus yang disematkan pada elemen atau markup HTML sebagai penanda bahwa elemen DOM tersebut akan dikenai perlakuan tertentu oleh Vue js.

Menggunakan v-once dan v-on

V-once digunakan agar nilai variabel pada template tidak bisa diubah-ubah lagi, kita lihat contohnya di bawah ini.

<!DOCTYPE html>
<html>

<head>
    <title>Belajar Vue</title>
    <script src="lib/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <h1 v-once>{{ message2 }}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello world!',
                message2: 'Ini V-once'
            }
        })
    </script>
</body>

</html>

di contoh di atas kita punya dua data yaitu message dan message2, di message2 kita akan kasih directive v-once, setalah copy code di atas coba run. setelah itu coba buka console ganti data message dan message2 dengan mengketikan seperti berikut

vm.message ="test"
vm.message2 ="test"

dan ini lah hasil yang akan terjadi

bisa terlihat bahwa data message2 tidak berubah tetap sama, berarti directive v-once berjalan.

v-on

Merupakan directive yang berperan sebagai sebuah event listener pada elemen HTML/komponen Vue Js.
Directive ini bertugas memantau aktifitas (aksi) yang dilakukan terhadap suatu elemen HTML/komponen Vue Js.

Contoh penggunaannya

<div id="app">
        <button v-on:click="info('halo')">
            Informasi
        </button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                info(text) {
                    alert(text)
                }
            }
        })
    </script>

maka hasilnya akan seperti ini

Selain directive v-on:click ada beberapa directive lain yang bisa kita gunakan, diantaranya:

  • v-on:mouseover ketika mouse berada di area elemen.
  • v-on:mouseenter ketika mouse masuk ke area elemen.
  • v-on:mouseout ketika mouse keluar dari area elemen.
  • v-on:mousedown sama dengan v-on:click.
  • v-on:keyup ketika keyboard up pada elemen (biasanya digunakan pada elemen input).
  • v-on:keydown ketika keyboard down pada elemen (biasanya digunakan pada elemen input).
  • v-on:submit ketika form di submit.