Membuat Hello World Menggunakan VUE JS

Update Terakhir pada

Assalamualaikum Wr. Wb.

Man teman, kali ini kita akan belajar Vue JS. Salah satu framework dari Javascript.

Vue JS merupakan framework yang digunakan untuk membangun antarmuka pengguna. Yang mana Vue JS ini lebih ringan, mudah dipelajari, dan cepat kinerjanya.

Selain itu, Vue JS memiliki dokumentasi yang mudah diikuti dan source codenya yang mudah untuk dibaca. Dan untuk dokumentasinya, man teman bisa kunjungi (https://vuejs.org/v2/guide/).

Pada postingan ini, kita akan coba belajar script sederhana. Yaitu membuat tulisan “hello word”.

Oke, langsung aja kita coba sama-sama.

  1. Buat file dalam bentuk html. Lalu ketikkan script html dasar seperti berikut ini.
<!DOCTYPE html>
<html>
<head>
	<title>Dasar Vue</title>
</head>
<body>

	<h3>Vue JS</h3>

</body>
</html>

2. Selanjutnya panggil script kode vue jsnya. Letakkan tepat sebelum tutup <body>.

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

3. Lalu tambahkan lagi script kode javascriptnya tepat di bawahnya pada langkah 2 tadi.

<script type="text/javascript">
	var app = new Vue(
	{
		el:'#teksnya',
		data:
		{
			isiteks:'Hello Word'
		}
	})
</script>

4. Kita akan menampilkan pesan tersebut ke script html, sama seperti javascript umumnya yaitu tambahkan atribut id=”” pada tag htmlnya. Nah, disini kita gunakan tag <p></p>.

<p id="teksnya"></p>

5. Pada langkah 4, ada id=”teksnya”. Itu sudah terhubung dengan kode dari javascript tadi. Lalu sekarang tambahkan dalam tag htmlnya kita panggil isi teks yang ada di javascriptnya, dengan kode seperti contoh di bawah ini.

<p id="teksnya">
	{{isiteks}}
</p>

6. Lalu Seperti inilah kodenya secara keseluruhan.

<!DOCTYPE html>
<html>
<head>
	<title>Dasar Vue</title>
</head>
<body>

	<h2>Vue JS</h2>

	<p id="teksnya">
		{{isiteks}}
	</p>

	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script type="text/javascript">
		var app = new Vue(
		{
			el:'#teksnya',
			data:
			{
				isiteks:'Hello Word'
			}
		})
	</script>
</body>
</html>

7. Maka akan tampil seperti ini.

Nah, mudah bukan???

Selamat mencoba ya…

Akhir kata, semoga bermanfaat ya…

Wassalamualaikum Wr. Wb.