Beranda / HTML

Cara Menggunakan Vue pada HTML

Posting Komentar

Kalau Anda baru mulai belajar JavaScript modern, besar kemungkinan pernah mendengar nama Vue.js. Biasanya Vue sering disebut sebagai salah satu framework atau library JavaScript yang ramah untuk pemula. Bahkan saya sendiri dulu mengenalnya dari sebuah video tutorial yang mengatakan bahwa Vue adalah "jalan tengah" antara kemudahan dan kemampuan.

Waktu pertama kali mendengar Vue, saya langsung membayangkan proses instalasi yang rumit, konfigurasi yang bikin pusing, dan terminal yang penuh tulisan aneh. Ternyata setelah dicoba, menggunakan Vue pada HTML jauh lebih sederhana daripada yang saya kira. Bahkan untuk percobaan pertama, kita hanya perlu satu file HTML dan koneksi internet.

Kalau saat ini Anda sedang mencari cara menggunakan Vue pada HTML, tenang saja. Anda tidak salah membuka artikel. Di artikel Blog Adi Prayitno ini, saya akan menjelaskan dengan bahasa yang santai dan mudah dipahami, terutama bagi yang baru mengenal Vue.js.

Cara Menggunakan Vue pada HTML

Apa Itu Vue.js?

Sebelum masuk ke praktik, ada baiknya kita kenalan dulu.

Vue.js adalah framework JavaScript yang digunakan untuk membuat tampilan website menjadi lebih interaktif. Kalau HTML bertugas menampilkan struktur halaman dan CSS bertugas mempercantik tampilannya, maka Vue membantu mengelola data dan interaksi pengguna dengan cara yang jauh lebih praktis.

Misalnya Anda ingin membuat:

  • Daftar tugas (To Do List)
  • Form interaktif
  • Kalkulator sederhana
  • Sistem pencarian data
  • Dashboard admin

Semua itu bisa dibuat lebih mudah dengan bantuan Vue.

Saya pribadi cukup suka Vue karena sintaksnya tidak terlalu membuat kepala berasap. Setidaknya dibanding saat pertama kali mencoba beberapa framework lain yang membuat saya merasa sedang membaca bahasa alien.

Cara Menggunakan Vue pada HTML Tanpa Instalasi

Bagian ini biasanya yang paling disukai pemula.

Karena kita tidak perlu menginstal apa pun terlebih dahulu.

Cukup tambahkan CDN Vue ke dalam file HTML.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Kemudian buat struktur HTML sederhana seperti berikut.

<!DOCTYPE html>
<html>

<head>
<title>Belajar Vue</title>
</head>

<body>

<div id="app">
{{ pesan }}
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
const { createApp } = Vue

createApp({
data() {
return {
pesan: 'Halo dari Vue.js'
}
}
}).mount('#app')
</script>

</body>
</html>

Kalau kode tersebut dijalankan, tulisan Halo dari Vue.js akan muncul di halaman.

Saat pertama kali melihat hasilnya, saya sempat berpikir, "Cuma begitu?"

Memang terlihat sederhana. Tetapi dari sinilah hampir semua konsep Vue dimulai.

Memahami Bagian {{ }} pada Vue

Mungkin Anda langsung memperhatikan bagian ini.

{{ pesan }}

Sintaks tersebut disebut Mustache Syntax.

Fungsinya untuk menampilkan data dari Vue ke halaman HTML.

Misalnya data kita seperti ini.

data() {
return {
nama: 'Adi'
}
}

Maka HTML berikut:

{{ nama }}

akan menghasilkan:

Adi

Sederhana sekali, bukan?

Justru karena sederhana itulah banyak orang nyaman belajar Vue sebagai langkah awal memahami framework JavaScript.

Mengubah Data Secara Dinamis

Salah satu kelebihan Vue adalah kemampuan memperbarui tampilan secara otomatis ketika data berubah.

Contohnya:

<div id="app">
{{ angka }}
</div>

createApp({
data() {
return {
angka: 10
}
}
}).mount('#app')

Kalau nilai angka berubah menjadi 20, tampilan di browser juga akan ikut berubah.

Tidak perlu menulis kode tambahan untuk memperbarui elemen HTML secara manual.

Jujur saja, saat pertama kali memahami konsep ini saya langsung berpikir, "Wah, ternyata hidup bisa sesederhana ini."

Karena sebelumnya saya terbiasa menggunakan JavaScript biasa yang cukup panjang hanya untuk mengubah isi sebuah elemen.

Menggunakan v-bind

Vue memiliki fitur bernama v-bind yang digunakan untuk menghubungkan atribut HTML dengan data.

Contoh:

<img v-bind:src="gambar">

Data Vue:

data() {
return {
gambar: 'foto.jpg'
}
}

Hasilnya, atribut src akan mengambil nilai dari variabel gambar.

Biasanya sintaks ini juga ditulis lebih singkat.

<img :src="gambar">

Saya pribadi lebih sering memakai versi singkat karena jari terasa lebih hemat tenaga saat mengetik.

Menggunakan v-model pada Form

Kalau Anda membuat form input, fitur ini akan sangat sering digunakan.

Contoh:

<div id="app">

<input v-model="nama">

<p>{{ nama }}</p>

</div>

Data:

data() {
return {
nama: ''
}
}

Setiap kali pengguna mengetik sesuatu, nilai variabel nama akan langsung berubah.

Tanpa perlu event listener tambahan.

Ini salah satu fitur yang membuat Vue terasa nyaman digunakan.

Menggunakan v-if

Kadang kita ingin menampilkan elemen hanya pada kondisi tertentu.

Contoh:

<p v-if="login">
Selamat datang
</p>

Data:

data() {
return {
login: true
}
}

Kalau login bernilai true, teks akan muncul.

Kalau false, teks menghilang.

Sesederhana itu.

Dan percayalah, fitur kecil seperti ini bisa sangat membantu saat aplikasi mulai berkembang.

Menggunakan v-for

Kalau memiliki daftar data, kita bisa menampilkannya menggunakan v-for.

<ul>
<li v-for="item in daftar">
{{ item }}
</li>
</ul>

Data:

data() {
return {
daftar: [
'HTML',
'CSS',
'JavaScript'
]
}
}

Hasilnya akan menjadi daftar yang berisi tiga item tersebut.

Saya cukup sering menggunakan v-for karena hampir semua aplikasi pasti memiliki data yang perlu ditampilkan berulang.

Kesalahan yang Sering Dilakukan Pemula

Saat belajar Vue, ada beberapa hal yang dulu cukup sering membuat saya bingung.

Lupa Menambahkan CDN Vue

Akibatnya kode Vue tidak berjalan sama sekali.

Lalu mulai menyalahkan laptop, browser, koneksi internet, bahkan cuaca.

Padahal masalahnya hanya satu baris script yang tertinggal.

Salah Menentukan ID

Contoh:

.mount('#app')

Tetapi HTML menggunakan:

<div id="aplikasi">

Akibatnya Vue tidak menemukan elemen yang dimaksud.

Terlalu Cepat Belajar Framework Lain

Menurut saya, lebih baik memahami dasar Vue terlebih dahulu sebelum berpindah ke topik yang lebih kompleks.

Karena fondasi yang kuat biasanya membuat proses belajar berikutnya jauh lebih mudah.

Apakah Vue Cocok untuk Pemula?

Menurut pengalaman saya, iya.

Vue memiliki dokumentasi yang bagus, sintaks yang cukup mudah dipahami, dan proses belajar yang tidak terlalu menakutkan.

Bahkan banyak orang mulai memahami konsep framework JavaScript melalui Vue sebelum mencoba teknologi yang lebih kompleks.

Kalau tujuan Anda adalah memahami cara kerja aplikasi web modern tanpa langsung terjun ke konfigurasi yang rumit, Vue bisa menjadi pilihan yang menarik.

Penutup

Belajar cara menggunakan Vue pada HTML sebenarnya tidak sesulit yang sering dibayangkan. Bahkan dengan satu file HTML dan CDN Vue, Anda sudah bisa mulai membuat halaman web yang interaktif.

Hal-hal penting yang bisa Anda ingat dari artikel ini:

  • Vue bisa digunakan langsung pada HTML melalui CDN.
  • Data ditampilkan menggunakan sintaks {{ }}.
  • v-model digunakan untuk form input.
  • v-bind digunakan untuk atribut HTML.
  • v-if digunakan untuk kondisi.
  • v-for digunakan untuk perulangan data.

Dulu saya mengira belajar framework JavaScript harus dimulai dengan instalasi yang rumit dan konfigurasi yang panjang. Setelah mencoba Vue secara langsung, ternyata langkah awalnya jauh lebih sederhana. Justru kesederhanaan itulah yang membuat banyak pemula betah mempelajarinya.

Terima kasih sudah berkunjung ke Blog Adi Prayitno dan membaca artikel Cara Menggunakan Vue pada HTML untuk Pemula. Semoga setelah membaca artikel ini, Anda jadi lebih percaya diri untuk mulai bereksperimen dengan Vue.js dan membangun proyek kecil pertama Anda.

Topik yang dibahas dalam artikel ini:

Cara menggunakan Vue pada HTML, Vue.js untuk pemula, belajar Vue.js, tutorial Vue.js, Vue CDN, framework JavaScript, Vue.js dasar, v-model, v-bind, v-if, v-for.

Posting Komentar untuk "Cara Menggunakan Vue pada HTML"

Silahkan berkomentar dengan bijak untuk kritik dan saran.
Spam link aktif akan segera saya hapus , Terimakasih.