lifelong learner — urip iku urup, currently working on accenture.

vue.js – quicklook user input & component

0
Degananda.com -

tutorial ini merupakan lanjutan dari : https://degananda.com/2017/05/22/vue-js-quicklook/ , anda dapat membaca ulasan tersebut jika di inginkan. Topik pembahasan pada ulasan ini adalah mengenai :

  1. User input directive
    user input directive adalah sebuah “tag” yang berfungsi untuk menghandle suatu event yang terjadi pada element di DOM. Contohnya kita memiliki elemen berupa button. Button tersebut memiliki banyak sekali event, contohnya : click, ketika button di click maka akan mengeksekusi fungsi tertentu. Secara umum terdapat enam event yang terjadi pada sebuah element(pada javascript biasa) yakni :

    Nama event penjelasan
    onchange ketika nilai dari suatu elemen berganti. Misalnya pada input text(input[type=”text”]) ketika value berganti maka event ini akan tertrigger
     onclick pada saat sebuah elemen di “klik” oleh mouse.
    onmouseover event yang tertrigger saat cursor dari mouse melewati sebuah elemen.
    onmouseout event yang tertrigger saat cursor dari mouse meninggalkan sebuah elemen.
    onkeydown saat keyboard dipencet/press. Kita dapat secara spesifik menentukan keypada mana yang dipencet misalkan keypad “enter” , “space”, dan lain-lain
    onload event yang tertrigger saat browser selesai meload halaman.

    Hal inilah yang disebut dengan user input. Pada vue tag user input di awali dengan

    <element v-on:nama_event="value">
  2. ComponentSeperti dengan angular, vue juga dibangun berdasarkan komponen-komponen kecil yang nantinnya akan disatukan. Komponen-komponen ini adalah custom elemen sekaligus custom directive.

1. User input

kita akan membuat user input event pada saat mengklik suatu tombol akan mengganti nilai dari variabel yang dirender di DOM.

elemen tombol akan disisipi dengan tag “v-on:click” yang berarti menggunakan directive dari vue yang akan menangkap event ketika user mengklik tombol “ganti nama”. Kemudian directive tersebut akan memanggil fungsi gantiNama() yang terdapat pada instances vue dibagian methods.


<div id="mynote">

    <div>
        {{ nama }}
    </div>


    <div>
        <button v-on:click="gantiNama()">Ganti nama</button>
    </div>


</div>

Selanjutnya pada instances vue yang berada difile javascript , kita tambahkan sebuah metadata baru bernama methods. Metadata ini berfungsi untuk menyimpan fungsi-fungsi yang ada pada elemen yang telah kita definisikan pada metadata “el”.

var app = new Vue({
    el : '#mynote',
    data : {
        nama : 'degananda ferdian priyambada'
    },
    methods : {
        gantiNama : function(){
            this.nama = 'abda kurniawan priyambada'
        }
    }
});

1.1 Input dari form(input type=”text”)

Contoh yang selanjutnya adalah ketika input bukan berasal dari suatu event melainkan dari form. pada kasus ini adalah kita akan memasukan nama dari sebuah inputext maka nilai dari input text tersebut yang akan dirender ke dalam DOM, hal ini juga disebut sebagai data-binding. yaitu suatu mekanisme saat terjadinnya pergantian data dari sebuah form. untuk lebih mengerti mengenai databinding dapat melihat ulasan mengenai data binding di tutorial angular (https://degananda.com/2017/05/19/chapter-2-directive-pipe-custom-pipe-angular-2-tutorial-bahasa/). kita akan menggunakan directive v-model untuk melakukan databinding

<element v-model="nama variabel pada data yang akan dibinding">

berikut adalah view dari form

nilai “indonesia tanah air beta” terbinding dengan data “nama”. inilah yang disebut dengan data binding. Ketika user mengetik sesuatu pada input form maka secara otomatis nilai yang ditampilkan sesuai dengan apa yang ditulis/ketik oleh user tersebut.

var app2 = new Vue({
    el : '#mynoteform',
    data : { 
        nama : ''
    }
})

isi file html yang digunakan


<div id="mynoteform">

    <div>
        {{ nama }}
    </div>


    <div>
        <input type="text" v-model="nama" placeholder="Masukan nama">
    </div>

</div>

2. Component

Vue menggunakan konsep membangun sebuah aplikasi yang disusun dari berbagai komponen kecil untuk disatukan. Hal ini memudahkan dalam proses develpoment dan juga meningkatkan perfoma.

komponen-komponen tersebut dapat dimodelkan menjadi sebuah tree view. Artinnya mereka dapat menjadi parent ataupun sebagai child (Konsep parent & child)

2.1 Membuat komponen pada vue

untuk membuat komponen pada fungsi  yang digunakan pada instances vue yaitu


Vue.component('nama komponen', {
  template : ''
});

letakan kode diatas sebelum membuat instances vue. Jika kita meletakannya setelah intances vue maka komponen tidak “terdaftar“.


Vue.component('masakan', {
    template : '<b>hey jude</b>'
});

var app = new Vue({
    el : '#mynote',
    data : {
        nama : 'degananda ferdian priyambada'
    },
    methods : {
        gantiNama : function(){
            this.nama = 'abda kurniawan priyambada'
        }
    }
});

var app2 = new Vue({
    el : '#mynoteform',
    data : { 
        nama : ''
    }
})

isi dari viewnya adalah :


<div id="mynote">

    <div>
        {{ nama }}
    </div>


    <div>
        <button v-on:click="gantiNama()">Ganti nama</button>
    </div>

    <masakan></masakan>

</div>

maka hasil ketika kita tampilkan dibrowser yaitu “hey jude” dengan syntax bold akan muncul karena kita panggil pada elemen mynote.

dengan begini berahirlah seri “quicklook” mengenai vuejs. Tutorial selanjutnya mengenai vuejs akan dibahas dengan menggunakan vue-cli untuk mempermudah proses development. Kedua ulasan mengenai vuejs sampai saat ini hanyalah sebagai pengenal. Jika anda tertarik dengan vuejs(berdasarkan dua ulasan ini) silahkan memperdalam vuejs. Namun jika tidak mungkin anda ingin melihat tutorial mengenai angular 2 😀