bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini kita akan belajar cara menggunakan vue js dan vue js dev tools.

Saat ini kita buat yang sederhana dulu ya, nanti seiring berjalanya waktu, kita akan membuat vue yang menggunakan CLI.

untuk awal - awal agar kita bisa menggunakan vue js, kita membutuhkan ini

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Lalu kita buat file dengan nama latihan1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>latihan 1</title>
</head>
<body>
<div id="root">
	<input type="text" id="input" v-model="message">
	<p>Makanan enak {{ message }}</p>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
	const app = new Vue({
		el: '#root',
		data:  {
			message: 'nasi padang'
		}
	})
</script>

</body>
</html>

Tampilanya seperti ini.

Penjelasan :

<div id="root">

Kita membuat div id yang bernama root
<input type="text" id="input" v-model="message">

Lalu kita buat input type text dengan id input dan menambahkan v-model="message" yang ada di fitur vue js
<p>Makanan enak {{ message }}</p>

Kita masukin <p> {{ message }} </p> nah ini sama seperti v-model="message", jadi agar mereka saling terintegrasi. kalau message-nya di ganti, berarti pada bagian input v-modelnya juga harus di ganti.

const app = new Vue({

Kita buat javascript-nya, kita buat variabel bernama app, lalu membuat kita tambahkan new Vue.

el: '#root',

el : '#root; ini maksudnya adalah el = element, kita ambil id root, yang berasal dari <div id="root">code</div>

data:   
        {
	    message: 'nasi padang'
        }

Kita buat data lalu kita tambahkan message : 'nasi padang', nah jadi message-nya saling integrasi.
message pada input, lalu message pada paragraf dan message pada javascript.

Om bewok sedikit menambahkan CSS, nah jadi seperti dibawah ini ya.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>latihan 1</title>
	<style>
	body, h1, h2, h3, h4, h5, h6  {
	  font-family: Arial, Helvetica, sans-serif ; 
	}

	h2 {
		text-align: center;
		background: #3498db;
		color: #fff;
		padding: 2rem;
	}

	p {
		background: #e74c3c;
		padding: 2rem;
		color: #fff;
		font-size: 2rem;
	}

	#root {
		padding: 1rem;
	}
	input {
		margin: 0 auto;
		width: 100%;
		padding: 2rem;
		margin: 2rem 0;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		display: inline-block;
		font-size: 1rem;
	}
	</style>
</head>
<body>
<div id="root">
	<h2>Belajar Vue Latihan pertama <br /><br />Makanan Kesukaan kamu apa ? </h2>
	<form action="">
	<input type="text" id="input" v-model="message" placeholder="Nama Makanan...">
	<p>Makanan kesukaan aku adalah <strong>{{ message }}</strong></p>
	</form>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
	const app = new Vue({
		el: '#root',
		data:  {
			message: ''
		}
	})
</script>

</body>
</html>