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 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.
Oke langsung saja kita mulai peraktik menggunakan event pada vue js, Untuk menggunakan events pada vue kita menggunakan directive v-on lalu diikuti dengan jenis event yang akan digunakan, misal: v-on:click, v-on:submit, v-on:keyup, dll. Misal seperti ini :
<!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" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>Events</h1>
<p>My age : {{ age }}</p>
<button v-on:click="addYear(1)">Add a Year</button>
<button v-on:click="decreasYear(1)"> Decreas A Year</button>
<button v-on:dblclick="addYear(10)">Add 10 Years</button>
<button v-on:dblclick="decreasYear(10)"> Decreas 10 Years</button>
</div>
<script src="app.js"></sccript>
</body>
</html>
Pada kode di atas kita memiliki kasus penggunaan event v-on::click yang mana akan memanggi beberapa fungsi yang kita akan buat. Oke sekarang kita akan menuliskan script javascript vue nya :
const vue = new Vue({
el : '#vue-app',
data : {
age: 26,
},
methods: {
addYear: function(inc) {
return this.age += inc;
},
decreasYear: function(dec) {
return this.age -= dec;
},
},
});
Oke kita punya satu data properties yaitu age lalu kita membuat 2 buah method addYear dan decreasYear dimana fungsi dari addYear adalah melakukan penambahan dengan parameter yang di bawa oleh method nya ketika di panggil dan sebaliknya fungsi decreaseYear akan melakukan pengurangan sesuai parameter yang di bawa oleh method nya ketika dipanggil.
ilahkan teman-teman jalankan program yang telah kita buat dan coba pahami penggunaan events listener pada vue js, Untuk derective dblclick adalah event saat kita melakukan double click.
Oke seperti itu lah teman-teman untuk Cara Menggunakan Events Pada Framework Vue Js dan sampai bertemu lagi pada artikel selanjutnya.
The post Cara Menggunakan Events Pada Framework Vue Js appeared first on Kursus Website Terbaik.