Langsung ke konten utama

Vue Js Tutorial Indonesia | 2 Hello Vue

Menggunakan Framework Vue js ada dua cara, yaitu menggunakan CDN dan Install di komputer Local.

Vue Js Tutorial Indonesia | 2 Hello Vue

Menggunakan CDN sama seperti pemanggilan file javascript pada biasanya, penggunaan seperti ini biasanya pada saat web project yang dibuat tidak begitu kompleks membutuhkan vue js, berbeda dengan cara yang di install secara langsung yang biasanya merupakan project yang berskala besar.

Kita mulai dengan sesuatu yang lebih mudah dulu, yaitu menggunakan CDN sebagai dasarnya, setelah dasar sudah siap maka kita akan lanjutkan tutorial yang install on the server.

ok pertama-tama buat file html biasa yang isinya kosong, seperti ini :
<html>
<head>
    <title>Belajar Vue Js</title>
</head>
<body>
</body>
</html>
Masukkan file Vue JS nya ke dalam file html, seperti pemanggilan file js secara umumnya:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Hingga menjadi seperti ini :
<html>
<head>
    <title>Belajar Vue Js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>

Sekarang vue js siap digunakan, kita akan menampilkan text Hello Vue! menggunakan Vue js, dengan cara seperti di bawah ini :
  1. Pertama kita butuh sebuah object document yang nantinya akan digunakan oleh vue js, contohnya disini kita akan menggunakan object div kemudian didalamnya kita akan menampilkan isi dari variable pesan , kita juga bisa menggunakan object document lainnya, seperti : spansmallb, dll. Bebas, kita bisa menggunakan object document mana saja.

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

    disini kita menambahkan id pada object  div  sebagai identitasnya dan pesan adalah suatu variabel yang akan di print nilainya.

    Kurung kurawal berfungsi untuk mengeksekusi / menghasilkan output dari javascript.

    tambahkan pada html yang telah dibuat sebelumnya, hingga menjadi seperti berikut:
    <html>
    <head>
        <title>Belajar Vue Js</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id="aplikasi">
        {{ pesan }}
      </div>
    </body>
    </html>
    
  2. Kita akan membuat vue js bisa di eksekusi di dalam object  div  yang sebelumnya sudah kita beri ID, masukkan kodingan di bawah ini kedalam blok javascript <script></script> :
    new Vue({
      el: '#aplikasi',
      data: {
        pesan: 'Hello Vue!'
      }
    })
    Dari kodingan tersebut : 
    • pertama kita panggil object vue dengan key new
    • di dalamnya ada el yang menyatakan element mana yang akan dijadikan element vue.
    • data merupakan tempat mendeklarasikan suatu data, dari contohnya di dalam sini ada data pesan yang bisa kita gunakan, disini juga bisa kita buat data berupa data-data lainnya seperti array atau object, contoh jika ingin menambahkan suatu data yang bernama status  dengan nilai terkirim:
      new Vue({
        el: '#aplikasi',
        data: {
          pesan: 'Hello Vue!',
          status: 'terkirim'  
        }
      })
     Gabungkan semua kodingan hingga menjadi seperti berikut :
    <html>
    <head>
        <title>Belajar Vue Js</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
      <div id="aplikasi">
        {{ pesan }}
      </div>
    </body>
    <script>
      new Vue({
        el: '#aplikasi',
        data: {
          pesan: 'Hello Vue!',
          status: 'terkirim' 
        }
      })
    </script>
    </html>
  3. Simpan dan jalankan, di browser harusnya terlihat seperti ini
    Belajar Vue Bahasa Indonesia
{{ message }}

Cukup untuk tutorial kali ini, jika ada kebingungan silahkan bertanya di kolom komentar di bawah ini.

Komentar

Postingan populer dari blog ini

Situs Belajar Coding Dapat Sertifikat Untuk Pekerjaan

Situs belajar bahasa pemrograman yang akan saya bagikan pada tulisan kali ini akan adalah situs yang bisa membuat anda mendapatkan pekerjaan dan yang pastinya materi dari situs yang saya pilih ini adalah materi yang berstandar internasional. Kelebihan dari memilih courses online dari pada membaca ebook atau menonton video tutorial di youtube adalah kita akan mendapatkan sertifiat, diamana sertfikat tersebut bisa kita gunakan untuk mendapatkan pekerjaan, dan berita bagus bagi para freelancer yaitu adanya linkedin situs yang mempermudah pertemuan antara pencari pekerjaan dengan perekrut dari suatu perusahaan, disana kita bisa menambahkan sertifikat, pengalaman kerja, keahlian yang kita miliki dan masih banyak lagi, selain itu kita juga bisa print profil kita menjadi sebuah portofolio berbentuk file PDF. Dari pengalaman saya sendiri yaitu selain mendapatkan tawaran pekerjaan saya juga sering di mendapatkan client yang memesan untuk di buatkan suatu aplikasi dan itu sering menjadi

Flutter Tutorial Indonesia | 1 Pendahuluan

Setelah rilisnya bahasa pemrograman Dart yang di kembangkan oleh google pada tahun 2011 kini bahasa tersebut sudah memiliki framework yang bisa digunakan untuk membuat aplikasi moile yaitu untuk android dan ios sekaligus dalam satu waktu. Flutter juga digunakan sebagai framework utama dalam pengembangan aplikasi untuk OS Google Fuchsia. Tentang Flutter : Menggunakan Library Grafik Google Skia untuk mesin rendernya, alias tidak menggunakan bawan dari android atau iOS, dan ini yang membuat tampilan di android, iOS, atau desktop tetap sama. Semua UI adalah Widget Rendering Lebih Cepat Tidak hanya untuk membuat UI Flutter juga untuk menangani aliran data dan status data yang rumit dengan cara yang elegan dengan model Reactive. Dalam acara Google I/O 2018 menyatakan bahwa sekarang sudah menyediakan dokumentasi yang lengkap di flutter.dev dan anda bisa langsung belajar framework ini dari dokumentasi tersebut atau bisa mengambil courses di udacity atau tempat courses lainnya sep

Flutter Tutorial Indonesia | 3 Aplikasi Pertama

Dalam sesi ini kita akan membuat aplikasi sederhana sebagai pembukaan dari beberapa tutorial yang akan disampaikan pada blog ini, sebagai dasar pemahaman pada pembahasan ini kita juga akan belajar mengenai struktur dasar dari project flutter. jika anda masih ragu dengan flutter, silahkan baca ini  https://flutter.dev/docs/resources/technical-overview Oke, sebelum membuat project baru, pastikan flutter sdk sudah siap digunakan, untuk mengaturnya anda bisa melihat pada tutorial sebelumnya. 1.Langkah Pertama : Membuat project baru untuk membuat project baru di terminal cukup ketik : flutter create namaaplikasi setelah project jadi, anda akan melihat beberapa kode yg disediakan sebagai contoh aplikasi sederhana dari flutter. 2. Pembahasan mengenai kode Sekarang anda mungkin penasaran dari mana proses awal aplikasi itu dijalankan. . ? Pada aplikasi flutter, file main.dart yang terletak pada folder lib merupakan file dart yang pertama kali di eksekusi, dan akan langsung me