Introduction VueJS

Spread the love
Introduction VueJS - Regentechno

Introduction VueJS

Regentechno – Kelanjutan dari Belajar VueJS kali ini kita akan masuk ke hal-hal mendasar mengenai VueJS dan kebutuhan environment nya yg sangat gampang sebenarnya. Juga kita akan melihat beberapa advantages (keuntungan-keuntungan) dari framework yang satu ini – Introduction VueJS.

Berikut adalah beberapa hal mengenai VueJS :

  • VueJS merupakan javascript framework yang responsif
  • Berbeda dengan framework lainnya, VueJS tidak membosankan karena selain dari core library nya yg keren, dia juga terdiri dari beberapa libraries yang optional yang berarti dapat diadopsi secara bertahap, sehingga kita bisa memiliki website yang sebagian darinya bukan terdiri dari VueJS
  • Sehingga dari point 2 kita mendapatkan keutungan besar, karena aplikasi yang pernah dibuat bisa rewritten (ditulis ulang) tanpa harus mengganti keseluruhan bagian daripada aplikasi, ini sangat gampang dibuat di VueJS, berbeda dengan framework lainnya seperti AngularJS yang lebih cenderung mengendalikan aplikasi kita sepenuhnya.
  • Dan walaupun core library nya sederhana alias simple, tapi VueJS sangatlah poweful, kita dapat menggunakannya untuk aplikasi tingkat lanjut seperti Single Page Application (SPA) ketika kita mengkombinasikan dengan optional libraries untuk :
    • Routing untuk membuat Single Page Application
    • Resource untuk membuat HTTP Request
    • Validator & Form
    • Lots of UI Components
    • … dan banyak lagi seperti third party libraries yang disuport oleh komunitas yang berkembang dan dinamis
  • VueJS makin menjadi-jadi kepopulerannya sejak dari tahun 2016 dan terlihat memiliki masa depan yang cerah, sehingga terlihat kebutuhan akan developer VueJS meningkat
  • VueJS mendukung components – Components itu ada : Model, Javascript, CSS dan kita bisa menggunakan Components di page mana saja, dan ini cara yang sangat baik untuk membuat website, karena Components dapat reused (digunakan kembali) dengan berbagai konteks, sehingga mengurangi duplicated code (duplikasi kode) gampang dirawat atau di maintain

Hello World

Introduction VueJS - Regentechno
VueJS documentation

Seperti biasa, jikalau kita ingin mempelajari sesuatu yang baru kita biasanya akan mencoba dengan tulisan Hello World.
Well, sebenarnya kita bisa belajar untuk sekarang-sekarang ini dengan JSFiddle. Karena kita hanya menggunakan link VueJS.
Seperti yang kita liat disamping dari dokumentasi VueJS kita hanya membutuhkan link tersebut ditambahkan ke dokumen HTML kita atau jika ingin disimpan bisa di buka linknya di tab baru dan menyimpannya.

Didalam komponen utama dari Vue.js merupakan sistem yang memungkinkan kita mendeklarasikan data dengan mendeklarasikan ke DOM dengan menggunakan sintaks template sederhana kaya begini :

Di kode javascript kita melihat bahwa kita perlu mendeklarasikan aplikasi VueJS kita dengan kata kunci new VueJS
el 
: mengartikan element apa yang kita ingin hubungkan dengan VueJS, dan itu juga mengartikan semua komponen di dalam element yang disebutkan akan terhubung denga VueJS
data : 
merupakan parameter object yang digunakan VueJS untuk mengirimkan objectnya ke element yang kita sudah mention

Dan seperti yang kita liat, bahwa kita dapat melakukan hal yang bisa dilakukan dengan javascript di template rendering yang disediakan VueJS, untuk lebih jelasnya bisa dilihat dibawah ini :

Disana kita bisa melihat bahwa kita menggunakan function split bawaan javascript untuk membagi strings yang dipisahkan oleh spasi dan menghasilkan array, lalu kita mengambil array pertama yang merupakan nama pertama saya.

Gampangkan ? Selanjutnya kita akan mulai masuk ke Method dalam VueJS dan masuk ke topik yang lebih lanjut.
Stay tuned ya!

Bagikan ke temanmu :
One Comment

Add a Comment

Your email address will not be published. Required fields are marked *