VueJs-#03 Dasar Vue.js

Instance

Setiap aplikasi Vue dimulai dengan membuat new Vue Instance sbb:

var vm = new Vue({
    // options
});

Sebagian desain Vue terinspirasi oleh pola MVVM walaupun tidak sepenuhnya. Variable seringkali dikonveksikan sebagai var vm (kependekan dari ViewModel) untuk merujuk ke Instance.

Saat Anda membuat instance, Anda akan mengirimkan options berbentuk Object berdasarkan Referensi API dengan struktur sbb :

Root Instance
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

Component

Component adalah salah satu fitur yang powerful dari Vue.js, kita dapat membuat sebuah component yang berisi elemen HTML yang dapat digunakan kembali (reusable) tanpa perlu menuliskan kembali elemen tersebut. Hal ini tentu saja dapat membantu anda mempercepat proses development, selain itu anda juga dimudahkan dalam me-mantainance code yang telah anda tulis. Berikut contoh penggunaan Component.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>V-Component</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="app" class="container">
            <blog-paragraf isi="saya belajar Vue.js"></blog-paragraf>
            <blog-paragraf isi="saya belajar Component"></blog-paragraf>
            <blog-paragraf isi="saya belajar bersama ombagoes.com"></blog-paragraf>
        </div>
        <template id="blog-paragraf">
            <h1>{{ isi }}</h1>
        </template>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
    Vue.component('blog-paragraf', {
        props: ['isi'],
        template: '#blog-paragraf'
    });
    new Vue({
        el: '#app',
    }); 
    </script>
</html>

1. Mustaches

Mustaches di VueJS merupakan cara untuk menampilkan data, untuk cara penggunaannya kita hanya perlu meletakan variablenya seperti ini {{nama_variable}}. nama variable selalu di apit dengan double kurung kurawal.

Dalam Program Pertama kita akan membuat tampilan text biasa “Welcome To VueJs” yang akan kita masukan pada variable pesan saat kita paggil {{message}} maka akan keluar tulisan Welcome To VueJs.

untuk mencobanya silahkan ketik source code di bawah ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello Vue!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Welcome To VueJs'
    }
  });
  </script>
</html>

Buka welcome.html berikut hasilnya:

welcome.html

2.Options/Data Properties

Options/Data terdiri dari beberapa pilihan yaitu :

  • data, yang berfungsi untuk mendeklarasikan data berbentuk object.
  • props, digunakan untuk menentukan tag komponen, dan mengembalikan format sesuai template yang dibuat.
  • computed, merupakan fungsi yang digunakan untuk menetukan sebuah variable tergantung dari hasil komputansi variable yang lainnya, contoh sederhananya seperti harga total yang merupakan hasil perkalian dari data harga jual * qty.
  • methods, merupakan fungsi yang dapat dipanggil berdasarkan suatu event tertentu, misal berdasarkan button v-on:click dll.
  • watch, untuk mengawasi perubahan pada variable saat melakukan fungsi computed & method.

3. Directive

Yang disebut sebagai Directive merupakan atribut khusus yang disematkan pada elemen atau markup HTML sebagai penanda bahwa elemen DOM tersebut akan dikenai perlakuan tertentu oleh Vue js.

1. Directive v-text dan v-html

Directive v-text dan v-html adalah cara lain untuk menampilkan data yang akan kita tampilkan. kita akan bahas satu persatu. coba ubah kode welcome.html yang kita buat sebelumnya.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello Vue!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app" v-text="message"></div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Welcome To VueJs'
    }
  });
  </script>
</html>

Hasilnya akan sama seperti saat menggunakan {{message}}. Sekarang kita ubah lagi sebagian kode welcome.html dari

<div id="app" v-text="message"></div>

menjadi

<div id="app" v-html="message"></div>

dan

var vm = new Vue({
    el: '#app',
    data: {
      message: 'Welcome To VueJs'
    }
  });

menjadi

var vm = new Vue({
    el: '#app',
    data: {
      message: '<h1>Welcome To VueJs</h1>'
    }
  });

Buka web browser hasilnya akan menjadi sbb :

v-html

Perbedaannya mustaches & v-text hanya bisa menampilkan text sementara v-html dapat menampilkan dalam bentuk html.


2. Directive If dan Else (conditional)

Ada beberapa directive bertipe pengandaian yang dibuat untuk memudahkan developer dalam melakukan pengembangan dalam programnya. menggunakan kondisi if di vue js contoh sederhana di bawah ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vue Conditionally Statement!</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app">
        <span v-if="visible"> {{ message }} </span>
        <span v-else="visible"> {{error_message}} </span>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
        visible: true,
        message: 'Vue Conditionally Statement!',
        error_message: 'Not Visible.'
    }
  });
  </script>
</html>

Code diatas pada bagian app.js ada 3 buah variable di dalam data, variable pertama visible sebagai acuan untuk if.

Variable kedua & ketiga merupakan pesan sebagai data yang akan ditampilkan.

<span v-if="visible"> {{ message }} </span>
<span v-else="visible"> {{error_message}} </span>

Jika variable visible diset true maka yg muncul adalah variable message, lainya jika false maka yang akan tampil adalah error_message.

Jika kondisi lebih dari 2, gunakan v-else-if.


3. Directive v-for

v-for digunakan untuk menampilkan data dalam bentuk list atau daftar yang bisa berupa array , objek atau collection (array dari objek).

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 :

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.

Mari kita lihat hasil dari List nya vue

v-for

Collection Array 2D

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 7.2',
        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 mengubah kodenya seperti ini :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>V-For 2d</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="app">
            <table border="1">
                <tbody v-for="courses in courses">
                    <tr>
                        <td>{{ courses.id }}</td>
                        <td>{{ courses.nama }}</td>
                        <td>Rp. {{ courses.harga }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
    var vm = new Vue({
        el: '#app',
        data: {
            courses: [
                {
                    id: 'PHP-211',
                    nama: 'PHP',
                    harga: 600000
                },
                {
                    id: 'JAVA-122',
                    nama: 'Java',
                    harga: 800000
                },
                {
                    id: 'SQL-119',
                    nama: 'SQL',
                    harga: 850000
                },
                {
                    id: 'JS-201',
                    nama: 'Javascript',
                    harga: 700000
                }

            ]
        }
    })
    </script>
</html>

Sehingga hasil menjadi sbb :

v-for 2d

4. Directive v-once

V-once digunakan agar nilai variabel pada template tidak bisa diubah-ubah lagi, kita lihat contohnya di bawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>V-Once</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div id="app">
      <h1>{{ message_standard }}</h1>
      <h1 v-once>{{ message_once }}</h1>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
  var vm = new Vue({
    el: '#app',
    data: {
      message_standard: 'Hello world!',
      message_once: 'Ini V-once'
    }
  });
  </script>
</html>

Pada contoh di atas kita punya dua data

  1. message_standard
  2. message_once

Pada message_once kita akan berikan directive v-once, setelah copy code di atas coba run. setelah itu coba buka console ganti data message_once dan message_once dengan mengketikan seperti berikut:

Console Test

Bisa terlihat bahwa data message2 tidak bisa dirubah tetap sama.


5. Directive v-on

v-on merupakan directive yang berperan sebagai sebuah event listener pada elemen HTML/komponen Vue Js.

Directive ini bertugas memantau aktifitas (aksi) yang dilakukan terhadap suatu elemen HTML/komponen Vue Js.

Contoh penggunaannya :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>V-On</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="app">
            <button v-on:click="info('Hello')">
                Click Me!!!
            </button>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
    var vm = new Vue({
          el: '#app',
          data: {
    
          },
          methods: {
                info(text) {
                    alert(text)
                }
          }
      })
    </script>
</html>

Hasilnya sbb :

V-on

Selain directive v-on:click ada beberapa directive lain yang bisa kita gunakan untuk memanggil method, diantaranya:

  1. v-on:mouseover ketika mouse berada di area elemen.
  2. v-on:mouseenter ketika mouse masuk ke area elemen.
  3. v-on:mouseout ketika mouse keluar dari area elemen.
  4. v-on:mousedown sama dengan v-on:click.
  5. v-on:keyup ketika keyboard up pada elemen (biasanya digunakan pada elemen input).
  6. v-on:keydown ketika keyboard down pada elemen (biasanya digunakan pada elemen input).
  7. v-on:submit ketika form di submit.

6. Directive v-bind

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 lang="en">
    <head>
        <title>V-Bind</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .active {
                color: brown
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h1 v-bind:class="{ active: isActive }">Test</h1>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
    var vm = new Vue({
        el: '#app',
        data: {
            isActive: false
        },
    });
    setTimeout(() => {
            vm.isActive = true
        }, 3000);
    </script>
</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>

7. Directive v-model

v-model merupakan directive yang digunakan untuk menandakan sebuah tag memiliki link dengan sebuah variabel vue dan memiliki proses two way-data binding. Biasanya di tempelkan di dalam element input HTML yang kita gunakan untuk melakukan perubahan terhadap value Javascript maupun Tampilan HTML kita.

Berlaku pada:

  • <input>
  • <select>
  • <textarea>
  • component

Contohnya :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>V-Model</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="firstname" placeholder="Nama Depan Anda">
            <p>{{firstname}}</p>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstname: ''
        }
    })
    </script>
</html>

Hasilnya sbb :

v-model

Sumber:

  1. https://warungcode.com/category/tutorial/vuejs/
  2. https://vuejs.org/v2/api/#Directives

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>