Cara Menampilkan value di inputan dengan Vue Js

Jadi untuk artikel kali ini, kita akan mencetak dimana hasil cetakan itu di dapat ketika kita mengetikan sesuatu di sebuah form inputan, dan yang kita akan gunakan atau yang kita akan pelajari nantinya adalah menggunakan cara menampilkan value di inputan dengan Vue Js, sebelumnya saya pernah mencetak value di inputan denga menggunakan jquery dan javascript, tetapi untuk yang ini berbeda ya, disini yang kita gunakan sebuah framework dari javascript yaitu vue js. oke bagaimana cara membuatnya simak terus ya teman-teman.

Cara Menampilkan value di inputan dengan Vue Js

disini saya harapkan teman-teman sudah pernah belajar HTML, CSS dan Javascriptnya ya, karena untuk menggunakan vue js, di butuhkan 3 (tiga) itu, jadi jika belum saya saran kan teman-teman belajar dulu, supaya tidak bingung atau kesulitan dalam memahami artikel kali ini, dan untuk vue js sendiri seperti yang saya tulis di atas, dia adalah sebuah framework dari javascript, jadi sama dengan jquery ya, sama-sama sebuah framework javascript, tetapi berbeda cara penulisannya, oke langsung saja hal yang pertama teman-teman lakukan adalah membuat sebuah website bootstrap, dan vue js nya, karena disini saya akan menggunakan cdn saja supaya lebih praktis, dan tentunya dengan bootstrap tampilan kita lebih rapih juga ya, oke silahkan teman-teman copy cdnya bootstrap dan vuenya seperti gambar di bawah ini:

yang kiri adalah cdn bootstrap dan yang kanan cdn vue js nya, dan disini saya menggunakan vue js versi 2, dan bootstrap versi 4.1.

oke jika sudah silahkan teman-teman letakan di head ya, dan silahkan teman-teman ketikan seperti ini:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Cara Menampilkan value di inputan dengan Vue Js </title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div class="container">
	<div class="row" id="view-app">
		<div class="col-md-2"></div>
		<div class="col-md-8">
			<form class="mt-4">
				<div class="form-group">
					<label>Username</label>
					<input type="text" name="" class="form-control" placeholder="Masukan nama anda" v-model="name">
				</div>
			</form>
			<label>Hasil</label>
			<p class="bg bg-primary text-light p-3">{{ name }}</p>
		</div>
		<div class="col-md-2"></div>
	</div>
</div>
<script type="text/javascript">
	new Vue({
		el: '#view-app',
		data: {
			name: ''
		}
	})
</script>
</body>
</html>

dan untuk penjelasan kode di atas seperti ini:

yang ada di head adalah link CDN nya, dan ketika kita menggunakan vue js kita harus menuliskan dimana kita akan memproses lembar project vue kita, container lah bahasa familiarnya, maka dari itu disini saya mengetikanya di row dengan nama id=”#view-app”, dan di inputan silahkan teman-teman  ketikan v-model dengan sama kan dengan data di bawah itu ya, (di tag script), dan untuk hasil cetakannya teman-teman buat {{ name }} karena namanya datanya name maka saya ketikan name juga, dan hasilnya sebagai berikut:

Untuk hasil di atas saya mencoba mengetikan “halo dumet school” maka tulisan itu juga akan tercetak pada bagian hasil di bawahnya, padahal disini saya belum menggunakan keyup ya, oke mungkin di next saya akan coba membuatnya. oke sepertinya cukup sampai disini dulu belajar kita tentang cara menampilkan value di inputan dengan Vue Js, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.