pada tahapan kali ini kita akan belajar mengenai sebuah framework font-end yang banyak digunakan untuk membuat aplikasi Single Page Application yang dimana aplikasi berjalan secara dinamis menggunakan 1 page saja yang memungkinkaanya bekerja secara dinamis.

pada pembelajaran pertama kali ini kita akan membuat website sederhana menggunakan vue js. perlu kalian ketahui untuk menggunakan vue.js sangat lah mudah kalian hanya tinggal meninisialisasikan vue js pada project kalian.

Membuat Web Dengan Vue.JS

kita bisa menggunakan CDN alias link yang bisa lasung kamu gunakan tanpa perlu init pada project lokal kalian untuk belajar vuejs.

taruh saja script berikut ini pada tag sebelum </head>

pastikan kalian punya koneksi internet agar script ini bisa jalan dikarenakan menggunakan sumber daya eksternal tentu pastinya untuk menjalakan vue js menggunakan cdn memakai internet.

buatlah dua file yaitu belajar-vue.html dan app.js

lalu ketikan kode berikut ini pada index.html untuk dijalankan nanti.

<!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>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script src="app.js"></script>
  </body>
</html>

lanjut ke tahap selanjut nya yaitu file app.js tulis kode nya seperti dibawah ini:

const app = Vue.createApp({
  template: "<h1>SELAMAT DATANG VUE JS</h1>",
});
 
app.mount("#app");

selesai kalian bisa melihat hasil nya akan terlihat tampilan seperti di bawah ini dengan cara buka file index.html nya di browser kalian.

Penjelasan Singkat

pada <div id="app"></div> akan ditempat kan sebagai elemen yang akan di mount dari app.js dengan menargetkan pada elemen div yang mempunyai id app yang yang sudah kalian tulis sehingga tertampil tulisan selamat datang vue js.

vue js akan mengalami perubah sintaks dan cara kerja nya pada setiap versi jadi bila mempeljari vue js bila muncul baru pasti belajar lagi.

melihat dari tampilan diatas kalian sudah pasti tahu tentang cara kerja vue secara keseluruhan nya bisa dibilang tools ini cukup serbaguna untuk membuat tampilan aplikasi web single page nanati semoga kedepan nya saya bisa mejelaskan lebih baik lagi kepada kalian.

terimakasih sudah membaca artikel kali ini.