Hallo teman-teman kembali lagi di artikel dumet school, oke kali ini kita akan membahas tentang javascript framework yaitu VUE JS . Kita akan membahas event listener pada vue js tepatnya Cara Menggunakan Keyboard Events Pada Framework Vue Js. Event pada javascript akan membuat web kita menjadi lebih interaktif dimana akan melakukan suatu respon/aksi berdasarkan event yang telah ditentukan yang akan memicu jalannya script Javascript yang ada di dalam web tersebut.
Setelah sebelumnya kita telah membahas tentang event modifier pada vuew js, nah kali ini kita akan membahas event yang lebih luas lagi yaitu membahas keyboard event listener, Sesuai namanya pasti teman-teman sudah mengetahuinya bahwa keyboard events merupakan events listener yang memanfaatkan keyboard pada komputer/lapotop/hp untuk menjadi sebuah triger menjalankan suatu perintah tertentu misal :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>Keyboard Event</h1>
<form action="">
<input type="text" v-on:keyup.enter="logName()"> <span>Name</span>
<input type="text" v-on:keyup.enter.alt="logEmail()"> <span>Email</span>
</form>
</div>
<script src="app.js"></script><br></body>
</html>
Dari kode di atas kita memiliki 2 input untuk menjalankan perintah pada vue js dan jika teman-teman perhatikan untuk menggunakan keyboard event saat ini kita akan mneggunakan derrective v-on:keyup lalau di susul oleh nama method yang akan di jalankan, Okes untuk kode vue js nya seperti ini :
// KeyboardEvent
const vue = new Vue({
el: '#vue-app',
data: {
},
methods: {
logName: () => {
console.log('enter the name')
},
logEmail: () => {
console.log('enter the email')
}
},
});
jika kita jalankan program tersebut saat kita tuliska sesuatu pada input lalu kita tekan enter maka program tersebut akan menjalankan perintah console.log(‘Enter the name’) lalu apabila kita tekan enter+alt maka rogram akan menjalankan perintah console.log(‘enter the email’); Dia akan menjalnakan susuai perintah keyboard yang kita telah definisikan di awal.
Oke seperti itu lah teman-teman untuk Cara Menggunakan Keyboard Events Pada Framework Vue Js dan sampai bertemu lagi pada artikel selanjutnya.
The post Cara Menggunakan Keyboard Events Pada Framework Vue Js appeared first on Kursus Website Terbaik.