Instalasi VueJs 3 Menggunakan CDN tidaklah sulit. Caranya hampir sama dengan instalasi VueJs 2. Tapi meskipun begitu, banyak yang kesulitan untuk melakukannya karena beberapa faktor yang ada. Pada artikel ini, akan dijelaskan dengan sederhana penggunaan vuejs 3 melalui CDN.
Mengenal VUeJs 3
Vue.js 3 adalah sebuah framework JavaScript yang dirancang untuk membangun antarmuka pengguna (user interface) yang responsif dan interaktif pada aplikasi web. Framework ini mengadopsi paradigma Model-View-ViewModel (MVVM) yang memisahkan antara tampilan (view) dan data (model) pada sebuah aplikasi. Vue.js 3 memungkinkan developer untuk membuat aplikasi web yang kompleks dengan mudah dan cepat, karena Vue.js 3 sangat fleksibel dan mudah dipelajari.
Dalam Vue.js 3, developer dapat membuat aplikasi dengan menggunakan deklarasi HTML yang mudah dimengerti. Selain itu, Vue.js 3 juga menyediakan fitur-fitur seperti reaktivitas (reactivity), binding, komponen, dan direktif untuk mempermudah proses pengembangan aplikasi web. Vue.js 3 juga menyediakan kemampuan untuk mengintegrasikan dengan library atau framework lain seperti Vuex (state management) dan Vue Router (routing).
Versi terbaru dari Vue.js, yaitu Vue.js 3, hadir dengan berbagai perbaikan dan peningkatan performa dibandingkan dengan versi sebelumnya. Beberapa perubahan yang terdapat pada Vue.js 3 antara lain penggunaan compiler baru yang lebih cepat dan efisien, penggunaan API Composition untuk memisahkan logika dari komponen, dan penggunaan Tree-shaking untuk memperkecil ukuran bundle JavaScript.
Pengertian CDN
CDN singkatan dari Content Delivery Network, yaitu suatu sistem yang terdiri dari sejumlah server yang terdistribusi secara geografis dan bekerja sama untuk memberikan konten internet (seperti file gambar, video, dokumen, atau script) secara lebih efisien dan cepat kepada pengguna.
Pada umumnya, pengguna internet akan mengakses konten dari server yang terletak paling dekat dengan lokasi mereka. Dengan menggunakan CDN, konten internet tersebut akan disalin dan disimpan di server-server CDN yang tersebar di berbagai lokasi di seluruh dunia. Ketika pengguna mengakses konten tersebut, CDN akan menentukan server mana yang terletak paling dekat dengan lokasi pengguna dan mengirimkan konten dari server tersebut. Dengan demikian, konten internet dapat diakses lebih cepat dan dengan latency yang lebih rendah.
Selain itu, CDN juga dapat membantu mengurangi beban server utama yang menyimpan konten, sehingga dapat mengurangi waktu respons dan mempercepat waktu muat halaman. Hal ini dapat membantu meningkatkan performa website atau aplikasi web secara keseluruhan.
Contoh Instalasi VueJs 3 Menggunakan CDN
Berikut ini merupakan contoh penggunakan atau instalasi vuejs 3 menggunakan CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contoh Vue.js 3 dengan CDN</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="incrementCount">Klik untuk tambah</button>
<button @click="decrementCount">Klik untuk kurang</button>
<p>Count: {{ count }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hitung maju atau mundur?',
count: 0
}
},
methods: {
incrementCount() {
this.count++;
},
decrementCount() {
this.count--;
}
}
});
app.mount('#app');
</script>
</body>
</html>Penjelasan:
- Pertama-tama, kita mengimpor Vue.js 3 melalui CDN dengan menambahkan script tag di head.
- Kemudian, kita membuat sebuah div dengan id “app”, yang akan menjadi tempat aplikasi Vue.js berjalan.
- Di dalam div “app”, kita menambahkan sebuah heading tag h1 yang menampilkan pesan yang disimpan di dalam data.
- Kemudian, kita menambahkan sebuah button yang akan memanggil method “incrementCount” ketika diklik.
- Di bawah button, kita menambahkan sebuah paragraf yang menampilkan nilai “count” yang disimpan di dalam data.
- Di dalam script, kita membuat sebuah aplikasi Vue.js dengan menggunakan Vue.createApp, yang menerima sebuah object dengan properti data dan methods.
- Di dalam data, kita menyimpan sebuah pesan dan sebuah variabel “count” dengan nilai awal 0.
- Di dalam methods, kita membuat sebuah method “incrementCount” yang akan menambahkan nilai variabel “count” ketika dipanggil.
- Terakhir, kita memanggil method mount pada objek app untuk menghubungkan aplikasi Vue.js dengan elemen HTML yang diinginkan, yaitu div dengan id “app”.
Dalam contoh ini, ketika tombol “Klik untuk tambah” ditekan, nilai variabel “count” akan bertambah dan nilai yang ditampilkan di paragraf “Count” juga akan berubah secara otomatis.
