Mencoba Vue.js Untuk Pertama Kali

Februari 5, 2019


Pada tutorial kali ini kita akan mencoba ‘menyapa’ Vue untuk pertama kali, yah maksud saya kita akan mencoba menampilkan kalimat ‘Hello Vue!’ di browser dengan menggunakan Vue.js pastinya.


Tahap pertama untuk memulai, kita install terlebih dahulu vue.js di direktori projek kita. Ada beberapa cara dalam pemasangan vue.js ini, antara lain.


Install Vue.js


Download

Kita bisa memulai memasang vue dengan mendownloadnya di sini https://vuejs.org/js/vue.js 


Untuk mode development sedangkan jika mau untuk produksi bisa di sini https://vuejs.org/js/vue.min.js.


CDN

Selain dengan cara di atas, kita bisa juga menautkan langsung secara online ke server dengan menggunakan tautan berikut https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.js 


Untuk mode developmentnya, untuk mode produksinya kita ubah vue.js menjadi vue.min.js.https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.min.js


Untuk mengetahui versi terbaru vue.js kunjungi link berikut https://cdn.jsdelivr.net/npm/vue


*Catatan: Selama tulisan ini dibuat versi dari vue sendiri adalah 2.6.0


Package Manager

Kita bisa juga menginstall vue melalui package manager yang saat ini mulai trend dikalangan programmer.


NPM

Berikut perintah untuk instalasi vue lewat NPM

atau


YARN

Sedangkan jika kalian menggunakan YARN, perintahnya sebagai berikut:

*Catatan: Cara install vue melalui package manager sangat disarankan bagi kita yang ingin membangun suatu aplikasi dengan skala besar.


CLI

Cara instalasi vue.js melalui CLI akan dibahas di lain waktu


Katakan ‘Hello Vue!’

Oke setelah melewati fase instalasi, sekarang waktunya untuk ‘menyapa’ Vue di browser.


Langkah pertama buka teks editor kalian entah sublime, atom, visual studio, notepad++, nano, dll. Buat file baru dengan nama sesuka kalian dengan ekstensi .html. Contoh index.html. Lalu ketikkan kode di bawah ini.

Pada kode di atas kita membuat sebuah div dengan atribut id yang bernilai “helloVue”. Kemudian buat link untuk ditautkan ke file vue.js dengan menggunakan tag html untuk javascript yaitu <script> di dalam tag <head>.

Atau kalian bisa juga deklarasikan tag <script> setelah tag </div>.

Tag <script> ini digunakan untuk mengimport file vue.js ke dalam file index.html. Atribut src menandakan lokasi file dari vue.js berada, dapat dilihat bahwa file vue.js terdapat di dalam folder library.


Lokasi file vue.js bisa kalian atur dimana saja, misalnya kalau mau dipindah satu ‘ruangan’ dengan file index.html juga boleh. Jadi pada saat deklarasinya pada atribut src menjadi src=”vue.js” untuk versi pengembangan atau src=”vue.min.js” untuk versi produksi. Saya buat folder library tujuannya agar lebih terstruktur saja.


Oh iya kalau importnya lewat CDN kalian ubah nilai atribut src tersebut ke link CDNnya ya.

Sama seperti sebelumnya jika ingin ubah ke versi produksi kalian tinggal ganti vue.js menjadi vue.min.js.


Oke lanjut. Sekarang buat tag <script> kembali di bawah tag <script> sebelumnya dan ketik kode berikut

Nah untuk sekarang kita sudah mulai membuat ‘surat’ untuk Vue di dalam amplop ‘script’. Isi dari surat tersebut yaitu pertama kita buat objek Vue new Vue({….}) dengan beberapa properti seperti


el: untuk menunjukkan tempat yang nantinya akan kita gunakan untuk menampilkan hasil manipulasi data dan template. Bisa kita lihat tempat yang kita gunakan untuk menampilkan data adalah tempat dengan id (#) helloVue. Kalian pasti tahu kan mana tempat yang mempunyai id (#)helloVue? Yap ada di <div>.


data: properti data pada kode di atas berbentuk objek dengan key dearVue dan bernilai string ‘HELLO VUE!’


Selanjutnya kita terbang ke tag <div> yang dalam awal pembahasan sudah kita buat. Oke, di sini lah kita akan mencurahkan isi ‘surat’ tersebut agar dapat ditampilkan di browser.


Untuk menandai bahwa key dearVue merupakan variabel yang nantinya akan dimanipulasi dan ditampilkan oleh Vue kita perlu deklarasikan key dearVue di dalam tag <div> dengan menggunakan double kurung kurawal (mustache).


Terakhir simpan perubahan file yang terjadi dan buka melalui browser.


Untuk source code lengkapnya bisa dilihat di bawah ini

Kategori