Pada bagian ini, kita akan belajar dasar-dasar bagaimana cara menggunakan Vue.js terlebih tentang cara menulis dan cara meletakkannya. Dengan memahami bagian ini, kamu akan paham bagaimana cara kerja framework Vue.js secara global.

Persiapan Belajar

Sebelum memulai, mari kita buat, persiapkan, dan pastikan file-file yang akan digunakan telah tersedia dengan baik.

Membuat Folder Latihan

Mari kita membuat sebuah folder misalnya saya namai dengan Dasar Vue. Lalu isi folder tersebut dengan:

  1. File kosong bernama dan berformat aplikasi.js.
  2. File kosong bernama dan berformat index.html.
  3. File vue.min.js apabila ingin menggunakan Vue.js secara offline.

Nah, file aplikasi.js adalah file yang akan kita gunakan untuk membuat koding Vue.js yang akan digunakan dalam aplikasi.

File index.html adalah file html yang akan dibuka oleh browser. Segala hasil tampilan kodingan kita bergantung pada isi di file ini.

Untuk file vue.min.js sendiri, seperti yang telah saya katakan dalam pos sebelumnya, itu dipakai tidaknya bergantung pada keinginan kita, apakah akan menggunakan Vue.js secara offline atau cukup menempelkan script online Vue.js dari CDN sebagai penggantinya.

Dalam pembuatan konten pembelajaran ini, saya sendiri akan menggunakan script CDN.

Membuat Kerangka HTML

Selanjutnya mari kita isi file index.html dengan kerangka standar HTML ditambah dengan mengaitkan file aplikasi.js dan CDN Vue.js ke dalamnya. Isinya adalah sebagai berikut.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Dasar-dasar Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="aplikasi.js"></script>
</body>
</html>

Instansiasi dan Pemberian Data Baru

Kita akan coba membuat latihan menampilkan sebuah teks dengan menggunakan Vue.js. Perbedaan dengan menggunakan tag paragraf <p> untuk menampilkan teks adalah hasilnya yang akan lebih dinamis dan reaktif. Kita coba lihat ya.

Instansiasi Objek Vue Baru

Buka file aplikasi.js, lalu kita akan membuat objek Vue baru yang akan merujuk pada id=”salam” pada html. Berikut kodingannya.

var salam = new Vue ({
    el: '#salam',
})

Memberi Data pada Objek Vue

Pada objek tersebut, saya akan menambahkan sebuah data berupa variabel bernama kenalan yang berisikan teks “Hai, belajar koding yu di Informatikawan“. Berikut kodingannya.

data:{
    kenalan: 'Hai, belajar koding yu di Informatikawan'
}

Kodingan di atas mesti kita tempatkan setelah el: ‘#salam’, sehingga isi dari file aplikasi.js adalah sebagai berikut.

var salam = new Vue ({
    el: '#salam',
    data:{
        kenalan: 'Hai, belajar koding yu di Informatikawan'
    }
})

Menampilkan Data dengan Metode Kumis

Hmm, apa yang kamu bayangkan dari kata ‘kumis’?

Metode kumis atau mustaches adalah metode memanggil secara langsung isi variabel dari objek Vue yang telah kita buat sebelumnya. Berikut kodingan pada file index.html yang digunakan untuk memanggil variabel kenalan dari objek salam pada kodingan di file aplikasi.js yang telah kita buat sebelumnya.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Dasar-dasar Vue</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="salam">
        {{kenalan}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="aplikasi.js"></script>
</body>
</html>

Bisa kita lihat dari kodingan di atas, ada beberapa hal yang mesti kamu perhatikan.

Yang pertama, kodingan untuk memanggil variabel kita letakan sebelum tag <script> untuk menempelkan Vue.js.

Yang kedua, pastikan kita membuat tag divisi <div> baru yang kita beri id=”salam” merujuk pada el: ‘#salam’, instansiasi objek di file aplikasi.js.

Nah, barulah dalam tag <div> tersebut kita isi dengan dua kumis bolak balik alias double kurung kurawal 🙂 yang berisi variabel apa yang akan kita panggil nilainya. Karena kita ingin memanggil isi variabel kenalan maka kita cukup tuliskan {{kenalan}}.

Berikut hasilnya apabila file index.html dijalankan.

Lah, kenapa gak tinggal pake <p>Hai, belajar koding yu di Informatikawan</p>?

Menampilkan Data dengan Metode v-text

Menampilkan Data dengan Metode v-html

Pos ini adalah panduan belajar kedua dari modul belajar Belajar Framework: Vue.js.