بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

Kumpulan Materi Management Informatika untuk SMA Islam Lembah Arafah

dan Kumpulan Hasil karya Siswa Lembah Arafah


Kategori vue    
  • Memulai Vue

    Seperti hal nya bahasa javascrip untuk instalasi cukup dengan metode CDN, yaitu Jaringan pengiriman konten (CDN) adalah jaringan server yang saling berhubungan dan mempercepat pemuatan halaman web untuk aplikasi yang membutuhkan banyak data. CDN merupakan singkatan dari content delivery network (jaringan pengiriman konten) atau content distribution network (jaringan distribusi konten). Saat pengguna mengunjungi situs web, data dari server situs web tersebut harus melintasi internet untuk mencapai komputer pengguna. Jika lokasi pengguna jauh dari server tersebut, pemuatan file besar akan memakan waktu yang lama, seperti video atau gambar situs web. Sebaliknya, konten situs web disimpan di server CDN yang secara geografis lebih dekat ke pengguna dan mencapai komputer pengguna dengan lebih cepat, untuk penggunaan CDN di vue bisa diarahkan dengan script sesuai di bawah ini

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    

    atau

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    

    Inti dari Vue.js adalah sistem yang mampu membantu kita dalam me render data kedalam DOM secara deklaratif menggunakan sintaks template yang mudah dan jelas:

    <div id="app">
      @{{ pesan }}
    </div>
    
    <script>
      const { createApp, ref } = Vue
    
      createApp({
        setup() {
          const pesan = ref('Hello vue!')
          return {
            pesan
          }
        }
      }).mount('#app')
    </script
    

    script lengkapnya seperti ini

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
    <div id="app">
        @{{ pesan }}
    </div>
    <script>
        const {
            createApp,
            ref
        } = Vue
    
        createApp({
            setup() {
                const pesan = ref('Hello vue!')
                return {
                    pesan
                }
            }
        }).mount('#app')
    </script>
    

    hasil
    Hello vue!