Cara Membuat Data Binding dengan Textbox pada Vue Js

Kali ini kita kan membuat sebuah program sederhana dengan membuat data binding dengan textbox pada Vue Js.

Dimana data yang di inputkan langsung tampil hasilnya secara realtime, langsung saja kita mengimplementasikannya, seperti biasa buat terlebih dahulu struktur dasar HTML dan berikan textbox:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Data Binding Textbox</title>
</head>
<body>
	<div id="app">
		<input type="text" placeholder="Ketik pesan disini" v-model="pesan">
		<br>
		<p>Pesan Anda adalah:</p>		
		<p>{{ pesan }}</p>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

Seperti itu ya teman-teman, dan kalian pun bisa menambahkan script untuk Vue.Js nya di file yang berbeda, ataupun di dalam file yang sama. Untuk contoh kali ini saya akan membuat file baru dengan nama apps.js, untuk scriptnya bisa teman-teman ikuti dibawah ini:

var app = new Vue({
	el: '#app',
	data: {
	   pesan: ''
	}
});

Dan sebelum kita mencoba menjalankannya pada browser, teman-teman jangan lupa untuk memanggil file apps.js tsb, untuk memanggil file apps.js teman-teman cukup menambahkan script dibawah ini, setelah <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

<script src="apps.js"></script>

Nah, untuk hasilnya teman-teman bisa cek pada browser yaa, dan jangan lupa untuk save sebelum mencoba pada browser. Semoga bermanfaat