Categories
VueJS

Cara Install Vue CLI (Command Line Interface)

Hallo coder 😃,vue membuat vue cli (command line interface) yaitu tools sederhana untuk scaffolding proyek aplikasi berbasi vue. terkadang kita rumit mengaturan javascript bundler dan semua tools terkait.

vue membuat tools untuk memudahkan kita untuk melakukan semua itu.

pada saat ini vue cli telah mencapai versi 3.x di vue cli 3 kita disediakan user interface berbasis web untuk membuat project. didalamnya terdapat banyak plugin yang bisa kita pakai.

Beberapa plugins yang disediakan antara lain: Typescript, PWA, Vuex, Vue Router, ESLint, unit testing dll.

Install Vue CLI

Sebelumnya anda buat dulu folder vue-project setelah itu masuk ke folder itu lewat terminal, sekarang coba anda ketikan seperti berikut di terminal anda.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Tunggu sampa instalasi selesai, ini akan memakan waktu lama, pastikan anda tersambung internet.

setelah instalasi selesai coba ketikan seperti berikut di terminal yang tadi. untuk mengcek versi.

vue --version

nanti akan muncul versi vue cli yang kamu install.

Membuat Project

Sekarang kita akan mencoba membuat project di vue cli, Untuk membuat projek baru dengan menggunakan vue-cli ini maka cukup jalankan perintah dengan format berikut. vue create

vue create myproject

atau

vue create <nama-project>

coba ketikan di terminal seperti berikut vue create myproject setelah kita enter maka akan keluar seperti berikut ini.

Cara Install Vue CLI (Command Line Interface)

Tunggu sampai selesai pastikan anda tersambung internet, jika sudah selesai dan berhasil maka akan keluar seperti ini di terminal.

Cara Install Vue CLI (Command Line Interface)

Berikut ini struktur folder dari project yang dibuat

Cara Install Vue CLI (Command Line Interface)

Sekarang kita akan jalankan projek kita ini. Pada terminal, masuk ke folder myproject kemudian jalankan perintah npm run serve.

$ cd myproject
$ npm run serve

Setlah berhasil di jalankan maka akan keluar tampilan berikut, setelah itu ketikan http://localhost:8081/ di browser anda

Cara Install Vue CLI (Command Line Interface)

jika sudah ketikan http://localhost:8081/ maka nampilan default nya akan seperti ini.

Cara Install Vue CLI (Command Line Interface)

Terdapat 3 folder utama yang terinstall yaitu:

  1. node_modules yaitu folder untuk menampung pustaka yan terinstalasi untuk projek ini, terdapat lebih dari 80 pustaka di dalamnya diantaranya: webpack, babel, browserify, eslint, dsb.
  2. src yaitu folder untuk menampung source code kita, seperti component, assets (image, icon), template, store, dsb.
  3. public yaitu folder untuk menampung file index.html atau mount point dari aplikasi kita nanti, ada juga file favicon di sini.

Baca juga pengenalan vue js

Categories
VueJS

Belajar Vue Js Bagian 10 : Components Basics

Hallo coder, ditutorial sebelumnya kita membahas Event Handling di vue js, sekarang kita akan membahas Components Basics di vue js.

Component merupakan sub class/objek dari Vue yang bisa kita buat untuk berbagai tujuan misalnya memecah kompleksitas kode. Setiap component memiliki lifecycle yang sama dengan objek Vuenya.

Untuk membuat sebuah component kita cukup, membuatnya seperti berikut.

Components Basics

Vue.component('nama-component', { /* options */ })

kita akan membuat sebuah component sederhana seperti ini.


Vue.component('button-counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            template: ''
        })
        new Vue({
            el: '#components-demo'
        })

    

didalam code di atas kita hanya cuku memanggil <button-counter></button-counter> sesuai nama component yang kita daftarkan.

hasilnya akan seperti ini :

Reusable Component

Component yang ada kita bisa kita gunakan berkali kali seperti ini.


    

Organizing Components

Banyak component yang terdapat dalam sebuah website contohnya navigation links, blog posts, footer, sidebar dan sbb.

Terkadang kita ingin merubah salah satu component tersebut hanya dalam satu atau beberapa halaman yang ada. jika kita tidak pisah pisah antar component, maka dalam satu file terdapat banyak sekali code.

maka oleh sebab itu kita harus memisah misah setiap component tersebut agar mudah di panggil kembali.

Sebuah aplikasi Vue bisa dibangun dari beberapa component yang memiliki strukturnya hirarki. seperti gambar di atas. ada dua cara Component Registration didalam vue js, yaitu : global dan local.

Component Registration

Global Component

Register component secara global akan membuat component tersebut bisa digunakan oleh semua objek utama (root) Vue.

Vue.component('my-component-name', {
  // ... options ...
})

component diatas akan di daftarkan secara global, dapat digunakan pada vue root(new vue).

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

dan kita bisa memakainya seperti ini


Local Registration

Register component secara local artinya component tersebut diregister hanya pada objek tersebut, dan tidak bisa dipakai di objeck lain.

contohnya sepeti berikut ini

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

dan kita harus definisikan component tersebut seperti ini

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

Component Names

Component Names atau penamaan component di dalam vue js di bagi menjadi dua yaitu :

kebab-case

Format kebab-case menggunakan huruf lowercase dan tentunya di antara katanya di pisahkan – (strip). contohnya seperti berikut ini.

Vue.component('my-component-name', { /* ... */ })

Ketika kita mendefinisikan component dengan menggunakan format kebab-case, maka komponen tersebut dapat diakses menggunakan custom element . <my-component-name>

PascalCase

Jika di PascalCase kita harus menggunakan huruf kapital di awal katanya, contohnya seperti berikut ini :

Vue.component('MyComponentName', { /* ... */ })

Ketika kita mendefinisikan component dengan menggunakan format PascalCase, maka kita bisa memilih untuk mengakses komponen tersebut dengan cara <my-component-name> atau <MyComponentName> . Namun hanya elemen kebab-case yang dianggap valid oleh DOM.

Materi dari Components Basics sudah beres di tutorial selanjutnya kita akan membahas bagian lanjutan dari component, jadi tetap pantengin web warungcode.com , jangan lupa share yah, salam coder .

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 💻

Categories
VueJS

Belajar Vue JS Bagian 5 : Menggunakan v-once dan v-on

Hallo coder, pada tutorial sebelumnya kita telah membahas Menggunakan if dan else di vue js pada pembahasan kali ini kita akan membahas v-once dan v-on pada Vue js. v-once dan v-on merupakan directive.

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

Menggunakan v-once dan v-on

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

<!DOCTYPE html>
<html>

<head>
    <title>Belajar Vue</title>
    <script src="lib/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <h1 v-once>{{ message2 }}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello world!',
                message2: 'Ini V-once'
            }
        })
    </script>
</body>

</html>

di contoh di atas kita punya dua data yaitu message dan message2, di message2 kita akan kasih directive v-once, setalah copy code di atas coba run. setelah itu coba buka console ganti data message dan message2 dengan mengketikan seperti berikut

vm.message ="test"
vm.message2 ="test"

dan ini lah hasil yang akan terjadi

bisa terlihat bahwa data message2 tidak berubah tetap sama, berarti directive v-once berjalan.

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

<div id="app">
        <button v-on:click="info('halo')">
            Informasi
        </button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                info(text) {
                    alert(text)
                }
            }
        })
    </script>

maka hasilnya akan seperti ini

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

  • v-on:mouseover ketika mouse berada di area elemen.
  • v-on:mouseenter ketika mouse masuk ke area elemen.
  • v-on:mouseout ketika mouse keluar dari area elemen.
  • v-on:mousedown sama dengan v-on:click.
  • v-on:keyup ketika keyboard up pada elemen (biasanya digunakan pada elemen input).
  • v-on:keydown ketika keyboard down pada elemen (biasanya digunakan pada elemen input).
  • v-on:submit ketika form di submit.
Categories
VueJS

Belajar Vue JS Bagian 4 : If dan Else (conditional)

Hallo Coder 😃 , Pada kali ini kita akan membahas tentang Menggunakan if di vue js. coditional atau pengandaian, yang dikenal dengan istilah jika – maka

Seperti ini Jika X melakukan A maka akan dapat B, Jika C melakukan D maka akan dapat E, dan seterusnya.

Pengandaian dalam javascript merupakan suatu perintah yang digunakan untuk memilih satu aksi dari beberapa kemungkinan dengan syarat tertentu seperti diatas.

Pengandaian ini sering digunakan dalam sebuah pemograman, seperti di PHP,  dan lainnya, seperti bahasa pemograman lainya VueJS juga bisa menggunakan if dan else.

Menggunakan if di vue js

ada beberapa directive bertipe pengandaian yang dibuat untuk memudahkan depeloper dalam melakukan pengembangan dalam programnya. menggunakan if di vue js contoh sederhana di bawah ini.

<!DOCTYPE html>
<html>
<head>
  <title>Belajar vue.JS</title>
</head>
<body>
  <div id="app">
    <b v-if="tampil"> {{ pesan }} </b>
  </div>
  <script src="vue.min.js"></script>
  <script src="apps.js"></script>
</body>
</html>
new Vue({
  el: '#app',
  data: {
    tampil: true,
    pesan: 'belajar conditional ini'
  }
})

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

Dan variable kedua pesan sebagai data yang akan ditampilknan. <b v-if=”tampil”> {{ pesan }} </b>   menggunakan if (v-if) untuk pengandaiannya.

Coba rubah tampil nya jadi false, maka pesan tidak akan muncul begitu pula sebaliknya jika true pesan akan muncul terus.

Bagaimana jika kita ingin memberi nilai pada sebuah if, coba lihat code dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <title>Belajar vue.JS</title>
</head>
<body>
  <div id="app">
    <b v-if="tampil == 'ada' "> {{ pesan }} </b>
  </div>
  <script src="vue.min.js"></script>
  <script src="apps.js"></script>
</body>
</html>
new Vue({
  el: '#app',
  data: {
    tampil: 'ada',
    pesan: 'belajar conditional',
    pesan2:'ini else'

  }
})

pada code di atas kita memberi sebuah nilai pada ifnya yaitu ada, coba rubah menjadi tidak maka tidak akan ada pesan yang keluar. coba rubah codenya seperti dibawah ini.

V-else

<!DOCTYPE html>
<html>
<head>
  <title>Belajar vue.JS</title>
</head>
<body>
  <div id="app">
    <b v-if="tampil"> {{ pesan }} </b>
    <b v-else="tampil"> {{ pesan2 }} </b>
  </div>
  <script src="vue.min.js"></script>
  <script src="apps.js"></script>
</body>
</html>
new Vue({
  el: '#app',
  data: {
    tampil: false,
    pesan: 'belajar conditional',
    pesan2: 'belajar else conditional'
    
  }
})

Didalam code diatas kita menggunakan if dan else, tidak enak menceritakan if tanpa else wkwkwk, codenya seperti berikut ini.

<b v-else="tampil"> {{ pesan2 }} </b>

kamu hanya perlu menganti pada directive v-if menjadi v-else. dan hasil yang akan keluar dari code diatas adalah pesan yang kedua mengapa ?

karena variable tampil bernilai false. coba rubah menjadi true maka yang akan keluar adalah pesan2.

begitu juga sebaliknya jika varible tampil2 false maka yang akan keluar adalah data yang ada di variable pesan.

Menggunakan if di vue Js sama seperti bahasa yang lain hanya beda dalam codingannya strukturnya sama saja, anda bisa kreasikan code diatas seperti yang anda mau. Jangan lupa juga coba tutorial Menggunakan v-once dan v-on di vue js. Salam Coder.

Categories
VueJS

Belajar VueJS Bagian 3 : Menggunakan v-text dan v-html

Hallo coder, kali ini kita akan membahas menggunakan v-text dan v-html di Vue JS, setelah ditutorial sebelumnya  membahas  menggunakan mustaches.

v-text dan v-html adalah cara lain untuk menampilkan data yang akan kita tampilkan. kita akan bahas satu persatu. coba ketik code berikut ini.

<!DOCTYPE html>
<html>
<head>
  <title>Belajar vue.JS</title>
</head>
<body>
  <div id="app" v-text="pesan">
  </div>
  <script src="vue.min.js"></script>
  <script src="apps.js"></script>
</body>
</html>
var app = new Vue({
  el: '#app',
  data: {
    pesan: 'Hello Vue!'
  }
})

Sekarang lihat code diatas, ada sedikit perbedaan dari code di atas dengan code yang ada di tutorial sebelumnya.

ditutorial sebelumnya kita menggunakan {{pesan}} tanda kurawal untuk menampilkan data, sekarang kita hanya perlu menambah v-text=”pesan” di html untuk menampilkannya.

sekarang coba ubah codenya menjadi seperti berikut ini.

new Vue({
  el: '#app',
  data: {
    pesan: '<b>Hello Vue!</b>'
  }
})
  <div id="app" v-html="pesan">
  </div>

Cara diatas adalah cara untuk menampilkan data dengan bentuk html.

jika saat mengunakan mustaches kita mengetikan difile htmlnya, tapi saat kita menggunakan v-html kita hanya perlu mengetikan didalam app.js.

coba ubah code app.js seperti yang di bawah ini.

new Vue({
  el: '#app',
  data: {
    pesan: '<b>Hello</b> <i>Vue</i>! <u>Aku disini</u>'
  }
})

Mudah bukan belajar v-text dan v-html di Vue JS, ditutorial selanjutnya kita Membahas tentang Menggunakan if dan else di vue js.

semoga tutorial ini berguna jangan lupa klik ads untuk donasi, salam coder.

Categories
VueJS

Belajar VueJS Bagian 2 : Menggunakan Mustaches

Hallo Coder, sekarang kita akan membahas mengenai Cara Menggunakan Mustaches di Vue JS setelah sebelumnya kita membahas mengenai Mengenal VueJS.

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 Hello World!! (Ledgen banget di semua bahasa pemograman).

yang akan kita masukan pada variable pesan saat kita paggil {{pesan}} maka akan keluar tulisan Hello World!!.

untuk mencobanya silahkan ketik source code di bawah ini :

<!DOCTYPE html>
<html>
<head>
  <title>Belajar vue.JS</title>
</head>
<body>
  <div id="app">
    {{ pesan }}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script src="apps.js"></script>
</body>
</html>
var app = new Vue({
  el: '#app',
  data: {
    pesan: 'Hello World!'
  }
})

Sekarang mari kita bahas satu persatu agar dapat memahami dengan lebih baik, Coba lihat script dibawah ini.

<div id="app">
{{pesan}}
</div>

Aplikasi yang akan kita uat terletak pada bagian div di atas, mengapa harus div tidak yang lain ? karena div tidak berisi format apapun, kemudian coba lihat ada code id=”app” merupakan atribut dalam HTML, id disini sebagai penanda yang namanya tidak boleh sama antara satu id dengan id lainya pada contoh di atas kita menamakan app untuk id nya HTMLnya sudah beres sekarang kita kaitkan dengan Vue. mari lihat code dibawah ini

var app = new Vue({
  el: '#app', //ini adalah id yang kita paggil di html
  data: {
    pesan: 'Hello World!'
  }
})

Script dia atas dapat diartikan sebagai berikut, kita akn buat Vue baru dengan element(el) yang di kaitka dengan #app , dan kita membuat sebuah variable baru bernama pesan dengan isi Hello World!! , script dia atas kita namakan App.js. sekarang coba buka filenya.

Cuman gitu aja ? ets tenang dulu coba klik kanan->inspect elemen->console lalu ketik app.pesan di console maka akan keluar hello world!! terus coba ketik kan lagi app.pesan = “hello vueJS” , berubah bukan tulisan yang ada di layar ?

Wow berubah dinamis datanya, nah itulah yang di sebut dengan reactive dan VueJS mendukung akan itu.

Bagaimana tutorial Menggunakan Mustaches di Vue JS ? mudah kan, Jadi tetep pantengin warungcode dan sampai ketemu di tutorial selanjutnya kita akan membahas Menggunakan v-text dan v-html di vue js