Vue.js 3 untuk pemula : Belajar Vue 3 dengan menggunakan cdn (bagian 1)
Artikel ini akan membahas vuejs 3 untuk pemula, yaitu bagaimana menggunakan vue.js 3 hanya dengan menggunakan cdn tanpa perlu build.
Vue.js 3 adalah salah satu Javascript frontend framework paling populer saat ini, yang sangat mudah untuk dipelajari dan digunakan. Salah satu yang membedakan Vue.js dengan framework yang lain adalah, bahawa Vue.js dapat digunakan langsung hanya dengan cdn (baca: vue3 cdn). Tentu ini berbeda cerita jika Anda menggunakan Angular atau Svelte.
Pada artikel ini, kita akan belajar Vue.js 3 dari awal dan hanya menggunakan cdn saja, sehinga pembaca tidak perlu repot harus meng-install node.js atau sejenisnya. Cukup editor dan Browser saja.
Web app yang akan kita buat dengan menggunakan vue.js kali ini adalah sebuah webapp sederhana untuk mengacak angka dari 1 sampai dengan 100. Ketika pengguna meng-klik suatu tombol, maka akan dipilih angka secara acak selama beberapa detik, kemudian ditampilkan hasilnya. Kira-kira seperti gambar di bawah ini.
0. Menyiapkan text editor dan browser
Untuk mempermudah dalam mempreview hasil latihan, maka Penulis sangat merekomendasikan Anda untuk menggunakan Text Editor yang memiliki fungsi untuk dapat mempreview file html. Salah satunya adalah Visual Studio Code dengan tambahan ekstensi Live Server atau Live Preview.
Baca juga :
20 VS Code Extensions pilihan untuk Web/Frontend Developer/Programmer 2023
Sedangkan untuk browser, pastikan Anda menggunakan browser-browser paling baru. Bisa Google Chrome, Firefox, Safari, Opera dan lain-lain. Yang paling penting adalah browser versi terbaru.
1. Memilih Vue.js 3 cdn
Sebagai langkah pertama, silahkan buat folder baru untuk menampung semua file yang nantinya akan kita buat untuk latihan ini. Yang pertama kita buat adalah file index.html dengan isi kurang lebih seperti di bawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 3 untuk pemula</title>
</head>
<body>
</body>
</html>Kemudian tambahkan link script vue.js 3 dari cdn, bisa dari unpkg, atau jsdelivr atau cdnjs. Silahkan pilih salah satu, misalkan untuk contoh kali ini kita menggunakan vue.js 3 cdn dari unpkg. Untuk awal ini, silahkan gunakan varian vue 3 global (vue.global.js).
Terdapat beberapa jenis file vue.js, dimana masing-masing terdiri atas 2 jenis. Yaitu untuk development, dan untuk production. Semua file vue.js yang berakhiran prod.js atau prod.min.js adalah versi vue.js yang siap digunakan pada zona produksi.
Tambahkan script dengan src https://unpkg.com/vue@3/dist/vue.global.js ke dalam html di bagian paling akhir sebelum tag penutup body.
Sebenarnya Anda bisa saja menuliskan script
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
dibagian akhir head, akan tetapi kali ini kita pilih di akhir body untuk alasan best practice.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 3 untuk pemula</title>
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</body>
</html>Sampai di sini, vue.js 3 sudah siap untuk digunakan.
2. Vue.js hello world
Sebelum lebih lanjut, seperti biasa kita coba menampilkan kata hello world dengan menggunakan vue.js. Untuk itu, silahkan tambahkan kode dibawah ini dibagian setelah script vue.global.js.
<body>
<div id="app">
Hallo selamat datang <b>{{ nama }}</b>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data(){
return {
nama: "Fulan bin fulan"
}
}
})
app.mount('#app')
</script>
</body>Maka pada saat di preview, maka hasilnya kurang lebih seperti gambar di bawah ini.
Penjelasan kode:
<div id="app">
Hallo selamat datang <b>{{ nama }}</b>
</div>Di sini kita sedang menyiapkan tempat untuk aplikasi vue.js. Perhatikan tag div dengan id app. id app ini nantinya akan digunakan sebagai tempat untuk menempelkan/render aplikasi vue.js.
Perhatikan pula {{ nama }}. Ini adalah cara menulis text interpolation di vue.js.
Dimana bagian ini nanti akan di ganti dengan nilai dari data nama. Pada contoh
di atas, nama diisi dengan text Fulan bin fulan, sehingga pada hasil preview-nya adalah:
Hallo selamat datang Fulan bin fulan.
const app = Vue.createApp({
...
})
app.mount('#app')
Vue.createApp pada kode di atas artinya kita meng-inisialisasi aplikasi vue.js. Dimana object hasil inisialisasi ini disimpan ke dalam variable app. Object app ini kemudian di-tempelkan (mount) ke tag div dengan id app. Atau istilah teknisnya di-render ke tag div dengan id app.
Object Vue adalah global object vue.js yang tersedia secara global hasil dari <script src="https://unpkg.com/vue@3/dist/vue.global.js">
Cara lain dalam menggunakan Vue.createApp adalah dengan menggunakan
object destructuring sebagai berikut:
const { createApp } = Vue
const app = createApp({..})
data(){
return {
nama: "Fulan bin fulan"
}
}Di sini kita menyiapkan data yang nantinya dapat di panggil dari template. Pada contoh ini, kita membuat data object dengan property nama dengan nilai Fulan bin fulan.
Sampai di sini, mudah-mudahan sudah ada gambarang tentang bagaimana vue.js digunakan. Untuk selanjutnya, kita akan membuat aplikasi pengacak angka seperti tersebut di atas.
3. Membuat layout dan stylesheet
Seperti di gambarkan di awal, kita akan membuat layout terlebih dahulu sesuai dengak mockup. Kita tidak akan menggunakan framework css, melainkan membuat css custom, dengan menggunakan prinsip flexbox sebagai berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 3 untuk pemula</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="app">
<div class="counter">
<div class="number">
99
</div>
<button class="start">Mulai</button>
</div>
<div class="hasil">
<div>Hasil</div>
<div class="list">
<div class="item">Nomor 10</div>
<div class="item">Nomor 85</div>
<div class="item">Nomor 99</div>
</div>
</div>
</div>
</body>
</html>Jangan lupa, buat file dengan nama style.css di dalam folder tersebut, dengan susunan sebagai berikut.
@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
html,
body {
padding: 0;
margin: 0;
font-family: "Montserrat", sans-serif;
font-family: "Open Sans", sans-serif;
}
#app {
display: flex;
flex-direction: row;
}
button.start {
padding: 10px;
border-radius: 15px;
border-width: medium;
width: 100px;
}
.number {
font-size: 8rem;
padding: 20px;
}
.counter {
display: flex;
flex-direction: column;
align-items: center;
}
.hasil {
display: flex;
flex-direction: column;
justify-items: stretch;
border-left: 1px solid gray;
padding: 0 5px;
}
.list {
overflow: auto;
}
.item {
padding: 5px;
margin: 5px 5px 5px 0;
border: 1px solid #e2e2e2;
border-radius: 5px;
}
/* small */
@media (max-width: 575.98px) {
#app {
flex-direction: column;
}
.hasil {
margin-top: 20px;
padding-top: 10px;
border-top: 1px solid gray;
}
}
@media (min-width: 576px) {
.counter {
height: 100vh;
width: 80%;
justify-content: center;
}
.hasil {
width: 20%;
height: 100vh;
overflow: hidden;
}
}
Jika di preview, maka hasil kode kita atas kurang lebih akan seperti gambar di bawah ini.
Gambar di atas adalah hasil dari file index.html yang di preview dengan menggunakan ekstensi Live Preview.
Baca juga :
20 VS Code Extensions pilihan untuk Web/Frontend Developer/Programmer 2023: Live Preview
4. Membuat state dan method untuk menyimpan dan mengacak angka
Kemudian tambahkan script inisialisasi vue.js dan tambahkan data dan method untuk menyimpan dan mengacak angka.
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue
const app = createApp({
data() {
return {
counting: false,
number: 0,
hasil: []
}
},
methods: {
calc() {
if (this.counting) {
return
}
var inc = 0
this.counting = true
var instance = setInterval(() => {
this.number = Math.ceil(Math.random() * 100)
inc++
if (inc >= 20) {
this.hasil.push(this.number)
clearInterval(instance)
this.counting = false
}
}, 50)
}
},
})
app.mount("#app")
</script>
Data counting sebagai penanda apakah saat ini sedang berjalan proses mengacak angka atau tidak.
number sebagai variable untuk menyimpan hasil pengacak angka saat itu.
Sedangkan hasil adalah array untuk menyimpan semua hasil pengacakan angka.
Pada kode di atas kita juga mendeklarasikan 1 buah fungsi di dalam object methods, bernama calc yang akan melakukan pengacakan angka mulai dari 1 sampai dengan 100. Method calc ini nantinya akan dipanggil pada saat pengguna meng-klik tombol mulai.
Selanjutnya kita sesuaikan "template" sebelum-nya agar tombol dapat diklik dan hasil dapat ditampilkan.
<div id="app">
<div class="counter">
<div class="number">
{{ number }}
</div>
<button :disabled="counting" @click="calc" class="start">Mulai</button>
</div>
<div class="hasil">
<div>Hasil</div>
<div class="list">
<div class="item" v-for="(i,index) in hasil" :key="index">
Nomor {{ i }}
</div>
</div>
</div>
</div>Penjelasan kode
<button :disabled="counting" @click="calc" class="start">Mulai</button>Pada kode di atas, :disabled="counting" artinya, jika sedang dilakukan proses pengacakan angka, maka tombol mulai tidak bisa di klik.
@click="calc" artinya kita menambahkan event listener, pada saat tombol di-click, maka jalankan method calc.
<div class="item" v-for="(i,index) in hasil" :key="index">
Nomor {{ i }}
</div>Pada kode di atas, terdapat v-for="(i,index)" :key="index", ini adalah fitur looping data dari vue.js. Dengan v-for ini maka semua angka hasil pengacakan akan ditampilkan.
Sampai di sini kita sudah belajar untuk menggunakan vue.js 3 hanya dengan cdn dan tidak membutuhkan proses compile atau build. Secara teknis, apa yang kita pelajari di atas adalah Options Api dari vue.js. Yaitu sebuah cara untuk membangun aplikasi vue.js dengan mendefinisikan komponen, dan proses logic dengan object option yang berupa data, methods dan lain-lain.
Pada bagian selanjutnya, kita akan mencoba mengubah kode yang sudah kita buat di atas dari Options API menjadi Composition API, sekaligus mengubahnya menjadi modular dan multi components dengan tetap hanya menggunakan cdn.
Untuk kode sumber dan demo aplikasi dapat di akses di bawah ini.
Daftar pustaka:
https://vuejs.org/guide/quick-start.html#using-vue-from-cdn