Pengenalan dan Penggunaan Framework JavaScript “Vue JS”

1. Pengenalan Vue Js

Apa Itu Vue Js?

→ Vue JS adalah salah satu framework atau library dari JavaScript yang digunakan untuk untuk membuat tampilan (interface) pada website agar tampak lebih interaktif. Fungsi lain dari Vue JS adalah membuat SPA (Single Page Application). Apabila digunakan pada arsitektur MVC (Model — View — Controller), maka Vue JS menempati pada posisi View yang berjalan di sisi front end.

Jadi tugas utama dari framework ini adalah mengirim dan menerima data, kemudian membuat tampilan UI (User Interface) yang menarik. Framework ini juga sangat mudah untuk diintegrasikan dengan library yang lain. Jika diimplementasikan pada komponen HTML, maka Vue JS menggunakan ID, class, atau name untuk menginisialisasikannya.

Mengapa memilih Vue Js daripada Angular atau React?

→ Vuejs hadir untuk memberikan alternatif framework yang lebih ringan dibandingkan yang lainnya, proses integrasi menjadi lebih mudah, memiliki dukungan plugin, serta dokumentasi yang lengkap.

1. Cara Memulai Vue Js

Sebelum menggunakan Vue Js pastikan untuk menginstall Node Js terlebih dahulu, cara instalasinya seperti dibawah ini:

Referensi youtube untuk install node js : https://www.youtube.com/watch?v=iZ2NJTL18Ps

1. Install node js, buka di https://nodejs.org/en/ (*download yang tertulis recomended)

**Node.js adalah runtime environment untuk JavaScript yang bersifat open-source dan cross-platform. Dengan Node.js kita dapat menjalankan kode JavaScript di mana pun, tidak hanya terbatas pada lingkungan browser.

1. Setelah download langsung install (*klik next terus sampai finish)

Cek apakah node js sudah terinstall

• Klik logo windows atau klik logo windows + R > klik run > tulis cmd > lalu tulis tulis node -v

Jika berhasil, maka terminal akan menampilkan versi dari NodeJS yang sudah di install. Sedangkan jika muncul error seperti berikut dibawah ini, kemungkinan Anda belum melakukan setup/konfigurasi Path di Windows.

C:\Users\LENOVO>node -v

‘node’ is not recognized as an internal or external command,

operable program or batch file.

Berikut cara untuk konfigurasi Path: cari control panel -> System and Security -> System -> Advanced system settings -> Environment Variables -> System variables -> Path -> Edit

Tambahkan Path NodeJS sesuai dengan direktori saat anda melakukan instalasi di awal. Lalu klik ok

Cek NPM

NPM (Node Package Manager) : manajer paket untuk bahasa pemrograman JavaScript yang menjadi manajer baku untuk lingkungan runtime Node.js. Fungsi dari manajer paket ini yaitu untuk membuat project baru, menginstal modul atau library tambahan, serta menjalankan script tertentu pada terminal.

NPM sudah terinstal bersamaan dengan install nodejs.

Lalu setelah selesai menginstall Node Js, kalian bisa memulai untuk membuat project dari Vue Js

• Buka https://vuejs.org/ , klik install

• Lalu lihat di bagian local dan ikuti step by stepnya seperti yang dipraktikkan pada praktikum di bawah ini:

Ketik ini di cmd (windows+R, search “cmd”, enter) → npm init vue@latest

Pindah folder yang dibuat, install npm, jalankan npm

Pindah direktori → cd (nama direktori yang kamu buat)

Install npm

Jalankan npm

Lalu buka browser dan jalankan url di browser

Buka project helloworld.vue de vscode

Di components > HelloWorld.vue adalah tampilan yang ada di halaman browser

Coba mengubah halaman

Ini di file helloWorld.vue

<template>

<div class=”greetings”>

<h1 class=”green”>{{ msg }}</h1>

<h3>

<h1 style=”color:purple;”>halo gaes aku kuliah di amikom</h1>

<a target=”_blank” href=”https://vitejs.dev/">Vite</a> +

<a target=”_blank” href=”https://vuejs.org/">Vue 3</a>.

</h3>

</div>

</template>

Hasil

Perubahannya langsung tanpa merefresh browser karena ada fitur Hot Reload

Lihat cmd untuk perubahannya

Jika menghentikan project, buka cmd lalu control c

Untuk kembali menjalankan buka projectnya dulu lalu ketik npm run dev lalu buka di browser sesuai urlnya

Cara Menampilkan dan membuat file

• Buat file di src dengan nama pelatihan8.vue

• Buat struktur vue yaitu template, script, style
• Template = untuk struktur HTML
• Script = untuk struktur JavaScript
• Style = untuk struktur CSS

<template>

</template>

<script>

export default {

}

</script>

<style scoped>

</style>

• Menuliskan isi konten

<template>

<h1>Hallo Gaes</h1>

<h2>ini project Vue pertama kuy</h2>

</template>

<script>

export default {

}

</script>

<style scoped>

h1 {

color: blueviolet;

}

h2 {

background-color: aqua;

}

</style>

• Meroutekan file pelatihan8.vue untuk di tampilkan

Buka file main.js

import App from ‘./App.vue’

Diganti dengan file yang sudah dibuat

import App from ‘./pelatihan8.vue’

Hasil

3. Declarative Rendering

output HTML secara deklaratif berdasarkan statement javascript.

1. Buat fungsi data dan me return fungsi data
2. Print isi data dengan tanda kurung kurawal sebanyak 2 {{}}

• Buat fungsi data

<script>

export default {

data() {

return {

nama : ‘irfan’,

asal : ‘bantul’,

umur : 20,

}

}

}

</script>

• Buat print untuk isi fungsi data

<h3>nama saya {{nama}}</h3>

<h3>asal saya {{asal}}</h3>

<h3>umur saya {{umur}}</h3>

Hasil

• Modifikasi data dengan mounted(di masukin) di script

<script>

export default {

data() {

return {

nama : ‘irfan’,

asal : ‘bantul’,

umur : 20,

}

},

mounted() {

this.umur = this.umur + 3;

}

}

</script>

Hasil

4. Directive

• Handling user input 1

Memproses inputan dari user menggunakan directive

V-on adalah directives yang digunakan untuk menambahkan event listener(click, mouseout) pada suatu tempat

• Buat HandingInput.vue

• Buat isi HandlingInput.vue
• Buat struktur vue yaitu template, script, style
• Buat untuk mencetak data di template
• Buat fungsi handlingInput

<template>

<h1>handling input angka</h1>

<h2>{{angka}}</h2>

<button v-on:click=”tambah”>+</button>

<button v-on:click=”kurang”>-</button>

</template>

<script>

export default {

data() {

return {

angka : 0

}

},

methods: {

tambah() {

this.angka += 1;

},

kurang() {

this.angka -= 1;

}

}

}

</script>

<style scoped>

</style>

Routekan file HadlingInput di main.js agar bisa ditampilkan

import App from ‘./HandlingInput.vue’

Hasil

Handling user input 2

V-model : membuat data binding(mengikat) pada element input form atau element

Melakukan sebuah input dan dikembalikan secara real time

• Membuat fie Model.vue

• Membuat struktur Model.vue (template, script, style)
• Buat fungsi data dan didalamnya ada return yang isinya pesan
• Buat untuk print dari isi pesan
• Buat inputan untuk pesan

<template>

<h1>penggunaan V model</h1>

<h2>{{ pesan }}</h2>

<input v-model=”pesan” >

</template>

<script>

export default {

data() {

return {

pesan : ‘’

}

}

}

</script>

<style scoped>

</style>

• Route file Model.vue di main.js agar bisa ditampilkan

import App from ‘./Model.vue’

Hasil

Loops

Perulangan di vue js

• Buat file Loops.vue

• Buat struktur vue di loops.vue
• Buat function data yang isinya nama hari
• Buat untuk mencetak perulangan atau loopingnya di template

<template>

<tr v-for=”hari in namaHari” v-bind:key=”hari”>

<td>{{hari}}</td>

</tr>

</template>

<script>

export default {

data() {

return {

namaHari : [‘senin’,’selasa’,’rabu’,’kamis’,’jumat’,’sabtu’,’minggu’]

}

}

}

</script>

<style scoped>

</style>

• Jangan lupa meroutekan Loops.vue di main.js

import App from ‘./Loops.vue’

hasil

Conditional

Pengkondisian/percabangan if else di vue

Mencari nilai

• Buat file NilaiUjian.vue

• Buat struktur vue NilaiUjian.vue
• Buat function data dan hasil ujian
• Buat pencetak untuk function data

<template>

<h1>hasil ujian</h1>

<hr>

<h2>nama : {{nama}}</h2>

<h2>matkul : {{matkul}}</h2>

<hr>

<! — contoh if else →

<h2 v-if=”IkutUjian”>mengikuti ujian : {{menghadiri}}</h2>

<h2 v-else>tidak hadir</h2>

<hr>

<! — if elseif else →

<h2>nilai : {{nilai}}</h2>

<h2 v-if=”nilai >= 80">kamu dapat A</h2>

<h2 v-else-if=”nilai >=70">kamu dapat B</h2>

<h2 v-else-if=”nilai >=60">kamu dapat C</h2>

<h2 v-else>kamu kamu dapat D</h2>

</template>

<script>

export default {

data() {

return {

nama : ‘irfan’,

matkul : ‘pemrograman web’,

menghadiri:’hadir’,

IkutUjian : true,

nilai : 80,

}

}

}

</script>

<style scoped>

</style>

Hasil

Ciluba

https://drive.google.com/drive/folders/1PH6q2qVOs__VXu2jojZvKjjXpbLIOOD_?usp=sharing

Ini link assets

• Buat file ciluba.vue dan struktur vue

• Buat isi ciluba.vue
• Buat function data ciluba dan methods
• Buat conditional if else di template
• Simpan gambar di assets

<template>

<div v-if=”ciluba”><img src=”./assets/cilu.png” alt=””></div>

<div v-else><img src=”./assets/ba.png” alt=””></div>

<button @click=”setCiluba”>klik disini dong</button>

</template>

<script>

export default {

data() {

return {

ciluba : true

}

},

methods: {

setCiluba() {

this.ciluba = !this.ciluba

}

}

}

</script>

Simpan gambar

• Routekan ciluba.vue di main.js

import App from ‘./Ciluba.vue’

Hasil

• Klik button

Random Number

• Buat file RandomNumber.vue dan struktur vue

• Buat isi file RandomNumber.vue

<template>

<h1>{{bilangan}}</h1>

<h3 v-if=”ganjil”>bilangan ganjil</h3>

<h3 v-if=”genap”>bilangan genap</h3>

<button v-on:click=”RandomNumber”>cek bilangan</button>

</template>

<script>

export default {

data() {

return {

bilangan : 0,

ganjil : false,

genap : false,

}

},

methods: {

RandomNumber(){

this.bilangan = Math.floor(Math.random() * 10);

}

}

}

</script>

• Tampilkan untuk mengetahui bilangan dengan menambahkan methods TampilBilangan

<template>

<h1>{{bilangan}}</h1>

<h3 v-if=”ganjil”>bilangan ganjil</h3>

<h3 v-if=”genap”>bilangan genap</h3>

<button v-on:click=”RandomNumber”>cek bilangan</button>

</template>

<script>

export default {

data() {

return {

bilangan : 1,

ganjil : false,

genap : false,

}

},

methods: {

RandomNumber(){

this.bilangan = Math.floor(Math.random() * 10);

this.TampilBilangan();

},

TampilBilangan() {

if(this.bilangan%2==0){

this.genap = true;

this.ganjil = false;

}else {

this.genap = false;

this.ganjil = true;

}

},

}

}

</script>

• Untuk mengetahui bilangan dari awal tambahkan mounted

<template>

<h1>{{bilangan}}</h1>

<h3 v-if=”ganjil”>bilangan ganjil</h3>

<h3 v-if=”genap”>bilangan genap</h3>

<button v-on:click=”RandomNumber”>cek bilangan</button>

</template>

<script>

export default {

data() {

return {

bilangan : 0,

ganjil : false,

genap : false,

}

},

mounted() {

this.TampilBilangan();

},

methods: {

RandomNumber(){

this.bilangan = Math.floor(Math.random() * 10);

this.TampilBilangan();

},

TampilBilangan() {

if(this.bilangan%2==0){

this.genap = true;

this.ganjil = false;

}else {

this.genap = false;

this.ganjil = true;

}

},

}

}

</script>

Hasil