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

Cara menggunakan Directive v-on Vue.js

Posting Komentar
Cara menggunakan Directive v-on Vue.js

v-on merupakan sebuah directive yang sering digunakan ketika akan melakukan interaksi antara user dengan program oleh karena itu pembahasa sengaja dibuat tersendiri agar lebih mendalam, v-on berperan sebagai event listener pada elemen html atau komponen yang ada pada vue.js, directive ini bertugas untuk melakukan aksi yang akan dilakukan. contoh :

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

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

<body>
    <div id="app">
        <button v-on:click="pesan('ini adalah sebuah pesan.')">
            Tombol Pesan
        </button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            methods:{
                pesan(text){
                    alert(text);
                }
            }
        })
    </script>
</body>

</html>

Hasilnya : Cara menggunakan Directive v-on Vue.js

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

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

Demikian juga untuk modifiernya juga bermacam macam.

  1. .enter modifier ini akan bereaksi ketika keyboard Enter ditekan.
  2. .tab modifier ini akan bereaksi ketika keyboard Tab ditekan.
  3. .delete modifier ini akan bereaksi ketika keyboard Delete atau Backspace ditekan.
  4. .esc modifier ini akan bereaksi ketika keyboard Escape ditekan.
  5. .space modifier ini akan bereaksi ketika keyboard Spasi ditekan.
  6. .native modifier ini akan listen native event pada elemen root dari komponen.
  7. .ctrl modifier ini akan bereaksi ketika keyboard Ctrl ditekan.
  8. .alt modifier ini akan bereaksi ketika keyboard Alt ditekan.
  9. .shift modifier ini akan bereaksi ketika keyboard Shift ditekan.

Contoh: 

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

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

<body>
    <div id="app">
        <!-- ketika ditekan enter maka akan menjalankan fungsi submit -->
        <input v-on:keyup.enter="pesan('Terima kasih ' + $event.target.value)">
        <!-- Shift + Click -->
        <button v-on:click.ctrl="pesan('Selamat datang')">
            CTRL + CLICK
        </button>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            methods: {
                pesan(text) {
                    alert(text);
                }
            }
        })
    </script>
</body>

</html>

Posting Komentar untuk "Cara menggunakan Directive v-on Vue.js"