Tutorial Install Vue js dan Dev Tools Vue 2 Part 1 - Tutorial Programming & Digital Marketing

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Saturday, July 17, 2021

Tutorial Install Vue js dan Dev Tools Vue 2 Part 1



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>


Cara Install Vue Dev Tools

Kalian masuk aja ke 

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

Kalian install deh selesai.



Untuk tau apakah sudah terinstall atau belum, buka inspect element kalian lalu di ujung navbar ada tulisan vue js.

Selanjutnya di Part 2 kita akan mempelajari Belajar List Looping dan Button Event Click Listener 

No comments:

Post a Comment