Mengenal VueJS

Mei 11, 2020 Posting Komentar

Pengertian Vue

Vue (pengucapan /vju:/, dibaca seperti view) adalah sebuah library javascript yang dapat kita gunakan untuk membuat aplikasi frontend atau membuat tampilan berbasis SPA (Single Page Application).

SPA adalah sebuah halaman web yang memiliki sebuah halaman html, mungkin anda bingung kok bisa seperti itu? bagaimana jika kita mau buat halaman lain karena biasanya didalam sebuah web bisa saja terdapat banyak halaman untuk keperluan tertentu. jawabannya adalah pada web berbasis SPA khususnya Vue halaman web berupa komponen – komponen yang dapat dibuat secara dinamis ataupun statis, konsep kerjanya adalah menerapkan komponen tersebut kedalam sebuah file html sehingga komponen tersebut dapat dijalankan.

Mengapa Memilih Vue

Vue merupakan salah satu library yang mengalammi pertumbuhan yang sangat pesat dari awal diciptakan tahun 2013 oleh Evan You dan juga merupakan javascript yang sangat populer dibandingkan dengan library javascript yang lainnya. Berikut adalah grafik hasil pencarian berdasarkan data dari google trends sampai dengan artikel ini ditulis :

Instalasi dan Konfigurasi

Dikarenakan Vue merupakan sebuah library berarti kita pelu memasukan library tersebut kedalam project yang akan kita buat, Ada tiga cara instalasi Vue yaitu :

Secara Offline

untuk melakukan instalasi secara offline berarti kita perlu download terlebih dahulu library pada link berikut : https://vuejs.org/js/vue.js setelah download untuk memanggilnya kita perlu menambahkan dalam tag script seperti berikut :

<script src="lib/vue.js"></script>

Secara Online

untuk melakukan instalasi secara online anda dapat menggunakan link sebagai berikut :

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

Menggunakan CLI

Cara berikut adalah yang paling direkomendasikan karena lebih mudah dilakukan, dan mudah juga ketika akan melakukan instalasi modul yang lain seperti Vue Router,Vuex,Axios dan lain nya.

untuk melakukan instalasi menggunakan CLI kita wajib telebih dahulu menginstall node,js dan npm, node.js dapat anda download dan install menggunakan link berikut : https://nodejs.org/en/download/ pilih installer sesuai dengan spesifikasi komputer anda setelah itu buka cmd / terminal cek versi node dan npm menggunakan perintah :

node -v
npm -v

Install vue menggunakan perintah :

//instalasi Vue secara online menggunakan CLI
npm install -g @vue/cli
//membuat project baru dengan perintah berikut :
vue create hello-world

Membuat Aplikasi Hello World

untuk keperluan latihan pengenalan vue kita akan menggunakan instalasi secara offline cara yang pertama berarti kita perlu download terlebih dahulu Vue,js kemudian masukan kedalam project kita,

berikut adalah urutan folder yang ada pada project hello-world

hasilnya :

source code :


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hello World</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>{{selamat}}</h3>
        <h1>{{pesan}}</h1>
    </div>
    <script>
            data: {
        var vm = new Vue({
            el: '#app',
                selamat:'Selamat Datang di Vue'
                pesan: 'Hello World!',
            }
        })
    </script>
</body>
</html>

Penjelasan :

Kode program diatas adalah sebuah file html yang didalamnya terdapat beberapa tag html serta javascript,

 <script src="lib/vue.js"></script>

kode diatas berguna untuk menambahkan library vue.js kedam program yang tersimpan didalam folder lib.

<div id="app">
   <!-- source -->
</div>

kode diatas merupakan sebuah container element div dengan id=”app” tempat menampung data yang telah di proses oleh vue.js

<script>
        var vm = new Vue({
            el: '#app',
                pesan: 'Hello World!',
            data: {
                selamat:'Selamat Datang di Vue'
            }
        })
    </script>

Kode javascript diatas digunakan untuk melakukan inisialisasi vue.js kedalam sebuah variabel dan “el” merupakan sebuah property pada vue.js berguna untuk memberikan sebuah id pada element html agar dapat dilakukan pemanggilan, sedangkan “data” adalah properti yang digunakan untuk menampung variabel yang di deklarasikan pada vue.js, pada kode diatas terdapat dua buah variabel statis yaitu pesan dan selamat pemanggilan variabel tersebut pada container adalah sebagai berikut :

 <h1>{{pesan}}</h1>

Selamat mencoba, semoga berhasil.

YIISolutions