Postingan

Menampilkan postingan dengan label Vue

Cara instalasi Vue JS pada Windows

-
Gambar
Pengertian Vue JS Kali ini kita akan belajar salah satu framework javascript yang sedang populer dan banyak digunakan framework tersebut memiliki nama Gue JS. Vue JS merupakan sebuah framework yang memiliki kemampuan Sangat baik. Pada tutorial ini anda akan mempelajari bagaimana cara instalasi Vue JS pada sistem operasi Windows serta penggunaan nya. Mengenal Vue JS Seperti yang sudah disebutkan diatas Vue JS merupakan library JavaScript yang dapat kita gunakan sebagai Front End atau membuat tampilan web site agar lebih menarik dan interaktif. Pada umumnya Vue JS fokus terhadap rendering dan komposisi element. Tetapi jika kita akan membangun aplikasi yang lebih kompleks, maka kita perlu melakukan instalasi tambahan berupa state manajemen, routing, template dan lainnya. Dari tahun ke tahun Vue.js berkembang sangat pesat. Framework ini banyak digunakan oleh perusahaan besar seperti Adobe dan Google Padahal jika dihitung umurnya Vue JS masih baru.  Kehadiran Vue JS dapat men...
Posting Komentar
Baca selengkapnya

Cara menggunakan Directive v-on Vue.js

-
Gambar
v-on merupakan sebuah directive yang sering digunakan ketika akan melakukan interaksi antara user dengan program oleh karena itu pembahasa sengaja dibuat tersendiri agar lebih mendalam, v-on berperan sebagai event listener pada elemen html atau komponen yang ada pada vue.js, directive ini bertugas untuk melakukan aksi yang akan dilakukan. contoh : <!DOCTYPE html> <html lang="en"> <head> <title></title> <script src="lib/vue.js"></script> </head> <body> <div id="app"> <button v-on:click="pesan('ini adalah sebuah pesan.')"> Tombol Pesan </button> </div> <script> var vm = new Vue({ el: '#app', methods:{ pesan(text){ alert(text); } } }) </script> </body> </html> Hasilnya : Selain di...
Posting Komentar
Baca selengkapnya

Mengenal Directive pada VueJS

-
Gambar
Directive adalah atribut khusus yang dimasukan pada elemen HTML sebagai tanda bahwa elemen tersebut akan dilakukan aksi tertentu oleh Vue. Directive berbentuk ekspresi Javascript yang secara reaktif menerapkan efek ketika nilainya berubah. Penulisan atribut directive pada vue diawali dengan prefix v-, berikut adalah directive yang ada pada Vue : v-text v-once v-html v-bind Two-way binding using v-model v-if Loops Events v-text Directive yang dapat digunakan untuk menampilkan string, fungsinya sama seperti double bracket atau mustache contoh : <div id="app"> <p v-text="pesan"></p> <!-- directive text sama dengan --> <p>{{ pesan}}</p> <!-- sama dengan double brackets/mustache--> </div> v-once Directive yang digunakan agar nilai variabel pada template tidak bisa diubah, v-once hanya dirender satu kali oleh vue, pada render berikutnya akan diskip/dilewati seingga nilainya akan tetap sama, contoh : <p...
Posting Komentar
Baca selengkapnya

Cara Menggunakan Property Methods, Computed dan Filters pada VueJS

-
Gambar
VueJs memiliki beberapa property yang biasa digunakan pada kesempatan ini kita akan membahas mengenai property methods, computed dan filters. ketiga properti tersebut memiliki tujuan yang hampir sama namun memiliki perbedaan dalam penggunaan nya. Property Methods pada properti methods biasanya digunakan untuk menyelesaikan suatu permasalahan yang dapat dipanggil secara berulang-ulang, methods dapat berupa  fungsi untuk pemanggilan sebuag event, fungsi pada sebuag event dapat berupa return value atau  sebaliknya, contoh :  sebuah fungsi untuk menampilkan data,menghitung sebuah nilai luas,keliling, mengisi atau mengubah nilai dll.  berikut adalah contoh sebuah event : <!DOCTYPE html> <html lang="en"> <head> <title>Hello World</title> <script src="lib/vue.js"></script> </head> <body> <div id="app"> <h1>{{nilai}}</h1> <br/> <button...
Posting Komentar
Baca selengkapnya

Mengenal VueJS

-
Gambar
Pengertian Vue Vue (pengucapan /vju:/, dibaca seperti view) adalah sebuah library javascript yang dapat kita gunakan untuk membuat aplikasi frontend atau membuat tampilan   berbasis SPA (Single Page Application). SPA adalah sebuah halaman web yang memiliki sebuah halaman html, mungkin anda bingung kok bisa seperti itu? bagaimana jika kita mau buat halaman lain karena biasanya didalam sebuah web bisa saja terdapat banyak halaman untuk keperluan tertentu. jawabannya adalah pada web berbasis SPA khususnya Vue halaman web berupa komponen – komponen yang dapat dibuat secara dinamis ataupun statis, konsep kerjanya adalah menerapkan komponen tersebut kedalam sebuah file html sehingga komponen tersebut dapat dijalankan. Mengapa Memilih Vue Vue merupakan salah satu library yang mengalammi pertumbuhan yang sangat pesat dari awal diciptakan tahun 2013 oleh Evan You  dan juga merupakan javascript yang sangat populer dibandingkan dengan library javascript yang lainnya. Berikut adalah...
Posting Komentar
Baca selengkapnya