Vue Js Tutorial Indonesia

Vue Js Tutorial Indonesia | 2 Hello Vue

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

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 :

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 : span, small, b, 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>
```
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'  
  }
})
```

<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>

Simpan dan jalankan, di browser harusnya terlihat seperti ini

{{ message }}

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

Arian Saputra

Cari Blog Ini

Vue Js Tutorial Indonesia | 2 Hello Vue

Label

Komentar

Posting Komentar

Postingan populer dari blog ini

Apa itu API | 1 Belajar REST API Dengan Python Flask

Flutter Tutorial Indonesia | 1 Pendahuluan

Routing | 5 Belajar REST API Dengan Python Flask