Sunday, June 18, 2017

Getting Started Vue.JS

Vue (pronounced /vjuː/, like view) adalah progressive framework untuk membangun sebuah user interface.


Installasi Vue.JS dapat dengan menggunakan CDN,NPM, Bower, dan lain-lain. dapat dilihat pada:







Fitur pada Vue.JS:


  • Declarative Rendering, Vue.js menggunakan konsep rendering user interface secara deklaratif yang berarti tampilan yang ditampilkan ke user di deklarasikan DOMnya beserta dengan element dan attribute data masing-masing.
  • Loops, tidak jauh berbeda dengan framework front-end pada umumnya, Vue.js menyediakan fitur untuk menampilkan list data, dengan menggunakan keyword v-for="data in your-data-list" pada DOM element yang ingin ditampilkan
  • Conditionals, Fitur ini digunakan untuk melakukan operasi logika, dengan menggunakan keyword v-if="value" dan v-else
  • Data Binding, Secara default vue menggunakan konsep one way data binding, namun vue juga mempunyai fitur two way data binding. Dengan skema piramid terbalik (parent to child)
  • Directive dan Components, sama seperti AngularJS, Vue memiliki fitur directive (v-if, v-else, v-model merupakan directive bawaan dari Vue) namun kita dapat menginisiasi directive dengan logics yang dapat kita kustomisasi sendiri sesuai dengan kebutuhan. Berbeda dengan AngularJS perbedaan directive dengan component, di AngularJS kita dapat membuat sebuah component yang dengan menggunakan fitur directive. Sedangkan Component pada Vue merupakan sebuah HTML elements yang dapat di re-use codenya. Setiap component dapat dikustomisasi sesuai dengan behavior yang diinginkan.
  • Dan masih banyak fitur yang lainnya
Simple code in Vue:


Buat form seperti dibawah ini:











Source code file index.html:














Hasil setelah text field diisi inputan oleh











Sekian penjelasan sederhana saya tentang Vue.JS, sampai bertemu pada tulisan saya yang selanjutnya :D

References:

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

https://laracasts.com/series/learn-vue-2-step-by-step/

No comments:

Post a Comment