BlogArsmp

Catatan Belajar Vue : Instalasi dan 'Hello World'

aries -

Hari pertama. Apa itu Vue ? Berdasarkan situs ofisial Vue ( diucapakan /vju/ mirip View ) adalah progressive framework untuk membangun user interface. Core dari Vue berfokus pada layer view namun cukup mudah diintegrasikan dengan library yang sudah ada. Vue juga sangat cocok dan mampu untuk membuat SPA ( Single Page Application ). Begitu yang saya tangkap berdasarkan situs ofisialnya.

Instalasi

Masih menurut situs ofisial, ada tiga cara untuk memasang Vue ini, pertama menggunakan CDN, kedua menggunakan npm, terakhir menggunakan CLI. Pada catatan yang pertama ini saya pakai yang pertama yaitu CDN.

Caranya sederhana tambahkan saja CDN Vue ke dalam struktur HTML seperti berikut :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <script src="https://vuejs.org/js/vue.min.js"></script>

  </head>
  <body>
    <div id="app">
      <p>
      <!-- di dalam tag p akan muncul tulisan hello World -->
      </p>
    </div>
  </body>
</html>

Struktur Dasar

Sebagaimana javascript lainya Vue js ditulis di dalam tag < script >, untuk memunculkan kalimat ‘Hello World’ script yang digunakan seperti berikut

<script>
 new Vue({
    el: '#app',
    data: {
      text: 'Hello World'
    }
   })
</script>

Keseluruhan struktur HTML menjadi seperti berikut

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <script src="https://vuejs.org/js/vue.min.js"></script>

  </head>
  <body>
    <div id="app">
      <p>
      <!-- di dalam tag p akan muncul tulisan hello World -->
      </p>
    </div>
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        text: 'Hello World'
      }
     })
  </script>
</html>

 

Penjelasan

New Vue ({}) merupakan instance baru dari Vue sehingga saya bisa menggunakan fungsi-fungsi Vue. Pada instance Vue di atas saya memiliki dua properti yaitu “el” dan “data”. Properti “el” – istilah dari elemen – merupakan penanda bagian dari HTML yang dapat dimanipulasi oleh Vue, pada kasus di atas elemen yang bisa dimanipulasi oleh Vue itu elemen HTML di dalam id “app” ( tanda ‘#’ menandakan id sebagaimana selector di css ).

Jika properti “el” isinya adalah string dengan selector HTML, properti “data” merupakan objectyang di dalam object-nya terdapat properti “text” yang berisi tulisan ‘Hello World’. Penamaan properti di dalam “data” bebas terserah Anda, saya menggunakan “text” biar singkat.

Sekarang coba akses HTML yang kita buat.

Masih blank, itu karena saya belum mengeluarkan properti “text”, untuk memunculkan tulisan ‘Hello World’, untuk memunculkan properti tersebut maka struktur HTML ubah menjadi seperti berikut

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <script src="https://vuejs.org/js/vue.min.js"></script>

  </head>
  <body>
    <div id="app">
      <p>
      <!-- di dalam tag p akan muncul tulisan hello World -->
      
         {{ text }}
        
      </p>
    </div>
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        text: 'Hello World'
      }
     })
  </script>
</html>

Dan akses kembali.

Referensi :

1 : https://vuejs.org/v2/guide/index.html

2 : https://vuejs.org/v2/guide/installation.html

3 : https://www.youtube.com/watch?v=nyJSd6V2DRI&list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07