Memahami Two Way Data Binding Pada Vue Js
Di artikel kali ini saya akan membahas mengenai front end framework javascript yaitu Vue JS, jikalau sebelumnya kita telah membahas mengenai Cara Menggunakan Contains Method Di Laravel Collections di laravel sekarang ini kita akan membahas fitur collections laravel yaitu Memahami Two Way Data Binding Di Vue Js.Bagaimana sih konsep Two-Ways data binding ? Singkatnya seperti ini setiap perubahan yang kita lakukan di Javascript kita akan berpengaruh kepada tampilan (view layer) yang terdapat di pada kode HTML kita , dan sebaliknya perubahan yang terjadi di tampilan (view layer) akan berpengaruh pun kepada value yang terdapat di pada Javascript nya.
Misal kita meiliki HTML 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>
</head>
<body>
<div id=vue-app>
<h1>Keyboard Event</h1>
<form action=>
{{ name }}<input type=text v-model=name > <span>Name</span>
{{ email }}<input type=text v-model=email > <span>Email</span>
</form>
</div>
</body>
</html>
Untuk teman-teman bagi mempelejari mengenai two way data binding ini di harapkan telah tau basic dari vue js khususnya tentnag data propeties dan string interpolation.
Bagi menggunakan two way data binding kita menggunakan yang namanya MODEL, FUNGSI DARI MODEL AKAN MELAKUKAN BINDING SECARA DUA ARAH TERHADAP DATA PROPERTIES, APA BILA DATA PROPETIES NILAINYA BERUBAH MAKA SECARA TAMPILAN JUGA AKAN BERUBAH SECARA LANGSUNG .
Di kode HTML di atas kita mengaplikasikan kegunaan model di 2 buah inputan dimana di sebelahnya kita pun menampilkan data properties dengan menggunakan string interpolation, Kini kita akan bikin kode javascript menggunakan vue
const vue = new Vue({
el: '#vue-app',
data: {
name: '',
email: '',
},
});Jikalau di jalankan di browser karenanya hasilnya akan seperti ini :
Oke lumayan bagi artikel kali ini mengenai Memahami Two Way Data Binding Di Vue Js semoga bermanfaat bagi teman-teman semuanya, hingga bertemu di artikel berikutnya.
Sumber https://kursuswebsite.org
