Categories
VueJS

Belajar Vue Js Bagian 9 : Event Handling di Vue JS

Hallo Coder πŸ˜ƒ , Pada tutorial sebelumnya kita mambahas Input bindings di vue js, kali ini kita akan membahas Event Handling di Vue Js, Event Handling adalah suatu penanganan action yang terjadi.

jadi sesuatu akan terjadi jika ada event contohnya, saat tombol di klik akan ada tulisan keluar.

Listening to Events

Kamu dapat menggunakan v-on merupakan directive yang berperan sebagai sebuah event listener.

Contohnya :


Button yang di klik {{ counter }}.


var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

Hasilnya :

Button yang di klik {{ counter }}.

Method Event Handlers

method event handlers berfungsi untuk menangani event yang lebih komplek. jadi di dalam v-on kita simpan method yang akan di jalankan.

Contohnya :


  
var example2 = new Vue({
            el: '#example-2',
            data: {
                name: ''
            },
            // define methods under the `methods` object
            methods: {
                greet: function (event) {
                    // `this` inside methods points to the Vue instance
                    alert('Hello ' + this.name + '!')
                    // `event` is the native DOM event
                    if (event) {
                        alert(event.target.tagName)
                    }
                }
            }
        })

Hasilnya :

Methods in Inline Handlers

Jika dalam Metode event handlers kita hanya mengisi nama method di dalam v-on:click="nama_method" sedangkan di methods in inline handlers kita bisa langsung ke mengisi isi method nya juga seperti ini v-on:click=”nama_method(‘isi method’)”

Contohnya :

 
 
var example3 = new Vue({
            el: '#example-3',
            methods: {
                say: function (message) {
                    alert('Hi, '+message)
                }
            }
        })

Hasilnya :

dengan menggunakan method di atas akan mempersingkat code yang kita ketikan. semuanya tinggal kamu sesuaikan dengan kebutuhan yang kamu inginkan.

Bagaimana tutorial Event Handling di Vue Js, jika ada kesulitan silahkan tinggalkan dikolom komentar, Pada tutorial selanjutnya kita akan membahas Menggunakan Components Basics, Semoga dapat membantu tutorialnya, salam coder

Categories
VueJS

Belajar Vue Js Bagian 8 : Form Input Binding

Hallo Coder πŸ˜ƒ , Pada tutorial sebelumnya kita sudah membahas Membuat List di Vue Js , dan pada kali ini kita akan membahas Form input binding di vue js.

Didalam form html terdapat beberapa type yaitu : Text, Textarea, Radio, Checkbox, Select dan lainya. fungsi dari type tersebut berbeda beda.

Didalam input biding nanti kita akan memakai v-model dengan two way data binding. yang artinya jika kita menginputkan sesuatu maka akan ada data yang ikut terinput atau terubah.

Form input binding di vue js

#Text


Hasilnya: {{ messageText }}

Dalam code diatas kita melihat v-model untuk sebagai identitas dari input tersebut. jika kita ketikan sesuatu maka pada hasilpun akan ikut muncul sesuai yang kita ketikan

Hasilnya :

Hasilnya: {{ messageText }}

#TextArea


    

Hasilnya :
{{ messageTextarea }}


Hasilnya :

Hasilnya :
{{ messageTextarea }}


Didalam textarea kita bisa gunakan enter.

#Checkbox


    

Hasilnya :

Didalam checkbox juga kita bisa membuatnya dengan banyak checkbox, contohnya seperti ini


    

Checked names: {{ checkedNames }}

Hasilnya :


Checked names: {{ checkedNames }}

#Radio




Picked: {{ picked }}

Hasilnya :



Picked: {{ picked }}

#Select


    
Hasilnya: {{ selected }}

Hasilnya :

Hasilnya: {{ selected }}

Kamu juga bisa coba Multiple Select seperti ini


    
Hasilnya: {{ selected }}

Hasilnya :

Hasilnya: {{ selected }}

Itulah materi dari tutorial Input Binding di vue js indah bukan πŸ’•, selebihnya tinggal kamu kreasikan dan pake sesuai kebutuhan kamu. semoga dapat membantu, sampai ketemu di tutorial selanjutnya, Salam Coder πŸ˜ƒ

Categories
VueJS

Belajar Vue Js Bagian 7 : Membuat List

Hallo Coder πŸ˜€, di permbahasan sebelumnya kita telah membahas Menggunakan v-bind di vue js, dan di pembahasan sekarang kita akan membahas Bagaimana caranya membuat List di Vue js.

Data dalam bentuk list atau daftar yang bisa berupa array , objek atau collection (array dari objek) bisa kita tampilkan dengan mudah menggunakan Vue Js

Membuat List di Vue Js

Sebagai contoh, kita mempunyai data array bahasa pemograman seperti berikut ini

languages: [
                    'PHP',
                    'Java',
                    'Python',
                    'SQL',
                    'Javascript'
                ]

Jika kita masukan dalam vue js kira kira seperti berikut ini

 var vm = new Vue({
            el: '#app',
            data: {
                languages: [
                    'PHP',
                    'Java',
                    'Python',
                    'SQL',
                    'Javascript'
                ]
            }
        })

Nah kita telah punya data yang akan ditampilkannya sekarang kita akan menampilkan datanya dalam bentuk list menggunakan tag <li>


  • {{ language }}

Dalam tag <li v-for="language in languages"> berfunsi untuk mengulang setiap data yang ada. Vue mempunyai directive v-for yang berfungsi untuk melakukan perulangan sebanyak elemen data yang ada pada variabel languages.

berbeda dengan php jika kita akan menampilkan biasanya kita menggunakan foreach, variable array nya biasanya di depan, seperti ini.

Foreach($languages as $language){
echo $language;
}

Sedangkan di vue js kita memangilnya dibelakang. mari kita lihat hasil dari List nya vue


Menampilkan Data Collection

Pada kasus nyata, seringkali kita dapati data tidak dalam bentuk array sederhana ataupun objek, melainkan dalam bentuk yang lebih kompleks semisal array dari objek atau dalam format JSON. apalagi sekarang lagi buming nya web servis, Terus bagaimana jika kita dapat data array dalam bentuk seperti ini.

courses: [
          {
           id: 'PHP-211',
           nama: 'PHP',
           harga: 600000
          },
]

kita ingin menapilkanya sesuai keynya. misalkan hanya data namanya saja atau data harganya saja. misalkan kita ingin menampilkan datanya kedalam bentuk table.

maka kita akan memakai template seperti ini


    
{{ courses.id }} {{ courses.nama }} Rp. {{ courses.harga }}

Mari kita bedah satu persatu code diatas.

karena kita akan menampilkannya dalam bentuk table maka kita harus meloopingnya di dalam tag <tbody> agar dapat tersusun rapih, codenya seperti berikut ini.




Oleh karena variabel c yang dihasilkan dari perulangan variabel courses berbentuk objek, maka kita bisa panggil setiap item didalamnya dengan menggunakan titik diikuti nama keynya.

c.nama //menampilkan nama
c.harga //menampilkan harga

contoh penerapanya seperti berikut ini.


                
                    {{ courses.id }}
                    {{ courses.nama }}
                    Rp. {{ courses.harga }}
                

Dan berikut Code kumplitnya.

Code Lengkapnya


{{ courses.id }} {{ courses.nama }} Rp. {{ courses.harga }}

kamu bisa menerapkannya sesuai keinginan kamu, bisa dalam bentuk list bisa dalam table ataupun card. jadi, salam coder.πŸ˜ƒπŸ˜ƒπŸ˜ƒ

Categories
VueJS

Belajar Vue JS Bagian 6 : Menggunakan v-bind

hallo coder πŸ˜ƒ, setelah dipertemuan sebelumnya kita membahas, Menggunakan v-once dan v-on pada vue js sekarang kita akan membahas Menggunakan v-bind di vue js.

v-bind adalah directive yang ada di vue js,Β v-bind mempunyai fungsi untuk mem-binding atribut HTML agar nilainya terupdate secara reactive.

Sesuai dengan data yang dinginkan. misalnya perubahan gambar, perubahan class pada suatu tag, perubahan style pada suatu tag.

Contohnya :

<!DOCTYPE html>
<html>

<head>
    <title>Belajar Vue</title>
    <script src="lib/vue.min.js"></script>
    <style>
        .active {
            color: brown
        }
    </style>
</head>

<body>
    <div id="app">
        <h1 v-bind:class="{ active: isActive }">Test</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: false
            }
        })
        setTimeout(() => {
            vm.isActive = true
        }, 3000);
    </script>
</body>

</html>

Pada contoh diatas, kita mem-biding suatu class pada tag h1, sehingga nilai class pada h1 menggikuti isActive, Β lihat disini

setTimeout(() => {
            vm.isActive = true
        }, 3000);

ini berfungsi untuk merubah isActive menjadi true dalam waktu 3 detik. jadi warna dari h1 akan berubah menjadi merah.

ini dapat di pakai untuk anda yang sedang membuat aplikasi yang menginginkan perbuhan data yang realtime.

kita juga dapat mem-biding dengan dua variable sekaligus dengan menggunakan [ ] (kurung siku). contohnya seperti ini

<h1 v-bind:class="[class1, class2]"></h1>

selain class, kita juga dapat mem-biding style contohnya seperti berikut ini.

 <h1 v-bind:style="{ color: color }">Test</h1>

Selesai suda tutorial Menggunakan v-bind di vue js, anda dapat kerasikan penggunaan v-bind ini. selamat mencoba sampai ketemu di tutorial Membuat List di Vue Js . salam coder πŸ’»