Install Vue js Versi 2 dan Vue js Dev Tools Part 1 - Bewok Programming

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Thursday, December 10, 2020

Install Vue js Versi 2 dan Vue js Dev Tools 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
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.

No comments:

Post a Comment