Memulai Belajar Vue.js - Anakbit

Apa itu Vue.js?

Vue.js adalah framework javascript yang digunakan untuk membangun user interface. Karena hanya untuk membangun user interface, Vue.js tidak selengkap framework javascript lainnya. Namun, kesederhanaan tersebut membuat Vue.js mudah untuk digunakan dan diintegrasikan dengan library lain maupun projek yang sudah jadi.

Anyway, Vue dibacanya seperti kita membaca view ya.

Persiapan

Karena Vue.js adalah sebuah library javascript, tentunya kita perlu menyertakan file Vue.js di html sebelum kita dapat menggunakan dan memulai belajar Vue.js. Cara termudah untuk menyertakan file Vue.js adalah dengan menggunnakan CDN. Seperti berikut ini:

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

Cara lainnya adalah dengan menggunakan vue-cli. Tetapi jika kamu baru saja mulai belajar javascript dan belum terbiasa dengan build tools berbasis Node.js, sebaiknya dihindari dulu karena nanti lama lagi harus belajar ini dan itu.

Declarative Rendering

Dengan Vue.js kita bisa dengan mudah menampilkan data ke DOM dengan syntax yang sederhana seperti berikut ini:

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

DEMO

Semudah itulah kita membuat sebuah aplikasi Vue.js. Selain menampilkan data ke DOM, Vue.js juga membuat data tersebut terhubung dengan DOM, sehingga perubahan pada data akan langsung merubah DOM. Kamu bisa coba di console merubah isi app.message, seketika message yang ada di DOM langsung berubah.

Selain menampilkan data dengan text interpolation seperti diatas, kita juga bisa menggunakan atribut bind, seperti berikut ini:

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div> 

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

DEMO

v-bind diatas adalah directive. Directive selalu diawali dengan v-, yang memberi tanda bahwa dia adalah atributt spesial yang disediakan oleh Vue.js. v-bind disini berfungsi sama dengan text interpolation, yaitu menghubungkan data dengan DOM, atau ketika ada perubahan data, maka Vue.js juga secara otomatis akan mengupdate DOM.

Conditionals and Loops

Conditional rendering dapat dengan mudah kita buat seperti berikut ini:

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

DEMO

Coba (di console) tulis app3.seen = false, kamu akan lihat tulisan diatas hilang.

Disini kita lihat bahwa kita bisa mem-bind tidak hanya data dengan teks atau atribut di DOM, tetapi juga struktur dari DOM.

Ada banyak directives lain yang disediakan oleh Vue.js dengan fungsinya masing-masing. Contoh lainnya ada v-for yang bisa kita gunakan untuk menampilkan item-item dari sebuah list dengan menggunakan data berupa Array*:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
       { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

DEMO

Coba tulis di *console *`app4.todos.push({ text: 'New item' }), maka di list tersebut akan bertambah satu item baru.

Handling User Input

Untuk membuat supaya user bisa berinteraksi dengan aplikasi, kita perlu menambahkan event listener. Di Vue.js kita bisa menggunakan directive v-on untuk manambah event listener yang akan menjalankan suatu fungsi di dalam aplikasi Vue kita:

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

DEMO

Perhatikan pada contoh diatas kita merubah tampilan aplikasi tanpa menrubah DOM, semua manipulasi DOM dilakukan oleh Vue.js, kita hanya perlul berfokus pada logika aplikasi.

Vue.js juga menyediakan directive v-model yang memudahkan two-way data binding antara input dan state aplikasi:

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

DEMO

Composing with Components

Komponen sistem adalah salah satu konsep dari Vue.js yang sangat penting untuk kita pahami. Karena dengan komponen sistem kita dapat membuat aplikasi besar yang dibentuk dari komponen-komponen kecil, sehingga aplikasi lebih mudah untuk di kembangkan dan dipelihara karena sifat komponen yang reusable.

Komponen Vue.js pada dasarnya adalah Vue instance, pembuatannya pun sederhana seperti berikut:

Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

Kemudian kita bisa gunakan di template:

<ol>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ol>

Tetapi script diatas akan menampilkan todo dengan teks yang sama. Kita bisa mengirim data dari parent scope ke komponen anak. Seperti berikut:

Vue.component('todo-item', {
  // The todo-item component now accepts a
  // "prop", which is like a custom attribute.
  // This prop is called todo.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

Kemudian kita bisa mengirim todo ke setiap komponen todo menggunakan v-bind:

<div id="app-7">
  <ol>
    <!--
      Now we provide each todo-item with the todo object
      it's representing, so that its content can be dynamic.
      We also need to provide each component with a "key",
      which will be explained later.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

DEMO

Ini adalah contoh yang sederhana, namun kita telah memisahkan aplikasi kita ke dua bagian kecil, komponen anak cukup decoupled dengan komponen parent karena menggunakan props. Dengan pemisahan seperti ini, kita bisa mengembangkan komponen <todo-item/> menjadi lebih kompleks tanpa mempengaruhi parent.

Di dalam pengembangan aplikasi yang besar, kita perlu memisahkan keseluruhan aplikasi menjadi komponen-komponen kecil untuk membuat pengembangan lebih mudah dilakukan. Contoh lain penggunaan komponen adalah sebagai berikut:

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div> 

Masih banyak lagi yang bisa dilakukan oleh Vue.js. Semoga artikel ini bisa membangun rasa penasaran kamu terhadap Vue.js dan tentunya membantu kamu memulai belajar Vue.js. Sampai jumpa di artikel selanjutnya.