Setelah sebelumnya saya sudah mendokumentasikan hal apa saja yang perlu dipersiapkan untuk memulai menggunakan vue.js , sekarang saya akan berlanjut ke tahapan berikutnya, saya akan memulai nya dengan file index.html , silahkan anda buka dan masukan kode dibawah ini :

<!DOCTYPE html>
<html>
<head>
<title>Yuk pelajari vue.js</title>
</head>
<!– Script Lainnya akan disisipkan disini –>
   <script src=”vue.min.js”></script>

   <script src=”apps.js”></script>
</body>
</html>

Oke, selanjutnya saya akan membuat “rumah” yaitu tempat untuk menampilkan data-data yang sudah diolah. Tempat menampilkan disini maksud nya adalah view. Jadi saya akan meletakan rumah ini kedalam file index.html , dimana saya akan meletakan nya ? Coba anda perhatikan script diatas, saya sudah menandai dengan tulisan bold, nah disitu akan diletakan nya, hapus aja comment diatas dan ganti dengan script yang harus dimasukan disana.

Sekarang kode diatas saya akan memberikan tambahan script :

<div id=”app”>
</div>

maka akan menjadi seperti dibawah ini :

<!DOCTYPE html>
<html>
<head>
<title>Yuk pelajari vue.js</title>
</head>
<body>
<div id=”app”>
<!– Script Lainnya akan disisipkan disini –>
</div>
<script src=”vue.min.js”></script>

   <script src=”apps.js”></script>
</body>
</html>

“rumah” dari aplikasi yang akan saya bangun di tutorial kali ini diletakan pada tag <div> , kenapa harus begitu ? karena secara default div tidak memiliki format apapun, hanya sebuah tempat kosong dan saya bisa mengisinya dengan macam-macam, cocok untuk sebuah “rumah” bukan ?

selanjutnya perhatikan kembali kode diatas, disana ada kode id=”app” , nah kode tersebut digunakan sebagai penanda atau atribut didalam HTML yang namanya tidak boleh sama antara id dengan id yang lainnya. Didalam dokumentasi ini saya memberikan id dengan nama app, jika anda kurang suka dengan nama itu, anda bisa mengganti dengan yang lainnya.

Nah, sekarang “rumah” nya sudah jadi yaitu berupa tag div  dengan id=”app” sebagai penandanya, selanjutnya apa ? langkah berikutnya saya akan kaitkan “rumah” tersebut dengan vue, langkah dalam mengkaitkan nya dikenal dengan istilah “instanisasi”.

Mari kita buka file apps.js yang telah kita persiapkan sebelumnya dan isi dengan script dibawah ini :

var app = new vue ({
  el: ‘#app’
//berikan script lanjutan disini
})

Maksudnya adalah saya akan membuat objek Vue baru, dengan menggunakan elemen (el) dan yang dikaitkan adalah ‘#app’ yang merujuk kepada <div id=”app”> dan sekarang “rumah” dan Vue sudah terhubung.

Selanjutnya, ini adalah langkah terakhirnya yaitu saya akan mengisi dan juga menata “rumah vue” dan saya akan mencoba menambahkan data berupa variabel dengan sebuah pesan yang isinya “Hello Dunia”, cara nya saya menuliskan kode dibawah ini :

data:{

pesan: ‘Hello Dunia’,

},

Pernyaan nya dimana saya akan meletakan kode tersebut ? Kode tersebut saya tempatkan ditempat yang telah ditandai sebelumnya (//berikan script lanjutan disini), pada file apps diatas diakhiri dengan sebuah tanda koma, itu artinya saya bisa menambahkan kode lainnya, nanti saya bahas ini sambil berjalan ya.

Jadi untuk script lengkap nya adalah sebagai berikut :

var app = new vue ({
  el: ‘#app’

data:{

pesan: ‘Hello Dunia’,

},
})

Nah, sekarang pemberian data sudah selesai selanjutnya saya tinggal menampilkan (view) data tersebut. Untuk menampilkan data tersebut saya membutuhkan file index.html, file tersebut sudah saya buat sebelumnya.

Untuk menampilkan dalam vue ada beberapa cara dan juga metode yang bisa kita gunakan, salah satunya dengan declarative rendering, directive v-text, dan directive v-html, yang masing – masing memiliki karakter  menampilkan yang berbeda.

Didalam menampilkan data, saya akan menggunakan yaitu declarative rendering, apa itu ? yaitu sebuah metode yang memungkinkan sintaks ataupun script dapat secara langsung merender data ke DOM.

Cukup bisa diikuti pembahasan kali ini ? Insya Allah dilanjutkan ke bagian ke-3, jika ada tambahan atau pertanyaan kirim di kolom komentar ya !