Full-Stack Specialist in Industry 4.0 for Manufacturing Industry: 6. Vue 3 Intermediate.html

6. Vue 3 Intermediate.html

Vue JS Intermediate

Template Syntax

Vue menggunakan sintaks template berbasis HTML yang memungkinkan Anda mengikat secara deklaratif DOM yang dirender ke data instance komponen yang mendasarinya. Semua template Vue adalah HTML yang valid secara sintaksis yang dapat diuraikan oleh browser yang sesuai spesifikasi dan parser HTML.

Di bawah tenda, Vue mengkompilasi template menjadi kode JavaScript yang sangat optimal. Dikombinasikan dengan sistem reaktivitas, Vue dapat dengan cerdas mengetahui jumlah minimal komponen untuk di render ulang dan menerapkan manipulasi DOM dalam jumlah minimal saat status aplikasi berubah.

Jika Anda terbiasa dengan konsep Virtual DOM dan lebih menyukai kekuatan mentah JavaScript, Anda juga dapat langsung menulis fungsi render alih-alih templat, dengan dukungan JSX opsional. Namun, perhatikan bahwa mereka tidak menikmati tingkat optimalisasi waktu kompilasi yang sama dengan template.

Directives

Direktif Vue.js (Vue directive) adalah fitur yang memungkinkan untuk memberikan instruksi khusus pada elemen HTML, sehingga dapat melakukan manipulasi atau perubahan tampilan, sesuai dengan data yang diambil dari model Vue.

Beberapa direktif Vue.js yang sering digunakan adalah:

v-bind: digunakan untuk mengikat data (data binding) dari model Vue ke atribut HTML, seperti class, style, atau nilai atribut lainnya. Contoh: <div v-bind:class="{ active: isActive }"></div>

Contoh kode Vue dengan menggunakan v-bind pada vue.js:

<!DOCTYPE html>

<head>

<title>Contoh Vue Directive v-bind</title>

</head>

<body>

<h1 v-bind:title="message">{{ message }}</h1>

</div>

var app = new Vue({

el: '#app',

data: {

message: 'Halo, ini contoh Vue Directive v-bind!'

}

});

</script>

</body>

</html>

Kalian dapat menyalin kode di atas ke index.html yang terdapat pada directory project kalian masing-masing, setelah menyalin kode di atas selanjutnya save file index.html tersebut lalu jalankan perintah npm run dev, setelah itu buka link localhost yang terdapat pada terminal. Jika tampilan pada browser kalian masing-masing sama dengan gambar di bawah ini maka kalian telah berhasil menggunakan vue directive v-bind.

v-model: digunakan untuk mengikat data input pada formulir dengan model Vue, sehingga data dapat disinkronkan secara otomatis. Contoh: <input v-model="message" type="text">

Contoh kode Vue dengan menggunakan v-model pada vue.js:

<!DOCTYPE html>

<html>

<head>

<title>Contoh Vue Directive v-model</title>

</head>

<body>

<h2>Contoh Vue Directive v-model</h2>

<p>Pesan: {{ message }}</p>

</div>

new Vue({

el: '#app',

data: {

message: ''

}

});

</script>

</body>

</html>

v-for: digunakan untuk melakukan pengulangan pada elemen HTML, berdasarkan data yang ada di dalam model Vue. Contoh: <li v-for="item in items">{{ item }}</li>

Contoh kode Vue dengan menggunakan v-for pada vue.js:

<!DOCTYPE html>

<html>

<head>

<title>Contoh Vue.js - v-for Directive</title>

</head>

<body>

<h2>Contoh Vue Directive v-for</h2>

<ul>

</ul>

</div>

var app = new Vue({

el: '#app',

data: {

items: ['Apel', 'Jeruk', 'Mangga', 'Pisang']

}

});

</script>

</body>

</html>

v-if: digunakan untuk melakukan pengecekan kondisi, dan menampilkan atau menyembunyikan elemen HTML sesuai dengan hasil pengecekan kondisi tersebut. Contoh: <div v-if="isTrue">True</div>

Contoh kode Vue dengan menggunakan v-if pada vue.js:

<!DOCTYPE html>

<html>

<head>

<title>Contoh Vue.js - Directive v-if</title>

</head>

<body>

<h1>Contoh Directive v-if</h1>

<p v-if="showMessage">Ini adalah pesan yang ditampilkan jika showMessage bernilai true.</p>

<p v-else>Ini adalah pesan yang ditampilkan jika showMessage bernilai false.</p>

<button @click="toggleMessage">Toggle Pesan</button>

</div>

new Vue({

el: '#app',

data: {

showMessage: true

methods: {

toggleMessage() {

this.showMessage = !this.showMessage;

}

});

</script>

</body>

</html>

v-show: digunakan untuk menampilkan atau menyembunyikan elemen HTML sesuai dengan hasil pengecekan kondisi, namun tetap menyimpan elemen HTML tersebut di dalam DOM (Document Object Model). Contoh: <div v-show="isTrue">True</div>

Contoh kode Vue dengan menggunakan v-show pada vue.js:

<!DOCTYPE html>

<html>

<head>

<title>Contoh Vue Directive v-show</title>

</head>

<body>

<h1 v-show="showMessage">Contoh Directive v-show</h1>

<button @click="toggleMessage">Toggle Pesan</button>

</div>

new Vue({

el: '#app',

data: {

showMessage: true

methods: {

toggleMessage: function() {

this.showMessage = !this.showMessage;

}

});

</script>

</body>

</html>

Direktif Vue.js sangat fleksibel dan dapat digunakan dengan berbagai cara, sehingga memudahkan kalian dalam memanipulasi tampilan.

Computed Properties

Computed properties pada Vue.js adalah properti yang dihitung secara dinamis dari nilai properti lain di dalam komponen Vue. Computed properties mirip dengan methods di Vue.js, namun ada perbedaan penting antara keduanya. Jika methods selalu dijalankan ulang ketika ada perubahan pada komponen, computed properties hanya dihitung ulang ketika nilai dependensinya berubah. Dalam hal ini, dependensi merujuk pada properti lain di dalam komponen yang digunakan untuk menghitung nilai computed property.

Contoh sederhana penggunaan computed properties pada Vue.js:

Pada contoh diatas, komponen Vue memiliki dua properti, yaitu `message` dan `reversedMessage`. Properti `message` berisi nilai string "Hello world". Sedangkan properti `reversedMessage` dihitung secara dinamis dari nilai properti `message`. Properti `reversedMessage` akan selalu mengandung nilai `message` yang diubah urutan karakternya menjadi terbalik.

Ketika nilai properti `message` diubah, nilai properti `reversedMessage` akan dihitung ulang secara otomatis karena `message` adalah dependensi dari properti `reversedMessage`. Hal ini memungkinkan kita untuk membuat properti yang selalu dihitung ulang sesuai dengan perubahan nilai dependensinya tanpa perlu menulis logika pembaruan manual.

Watchers

Watchers pada Vue.js adalah fitur yang memungkinkan kita untuk mengamati perubahan pada data di dalam komponen Vue dan menjalankan tindakan tertentu ketika terjadi perubahan. Watchers dapat digunakan untuk memantau perubahan pada data apapun di dalam komponen, seperti properti, data, atau bahkan properti yang dihitung secara dinamis.

Watchers diaktifkan dengan membuat properti `watch` di dalam objek `options` pada definisi komponen. Properti `watch` berisi daftar properti atau data yang ingin dipantau, serta tindakan yang ingin dijalankan ketika nilai properti atau data tersebut berubah.

Contoh sederhana penggunaan watchers pada Vue.js:

Pada contoh diatas, komponen Vue memiliki satu data, yaitu `count`. Properti `watch` digunakan untuk memantau perubahan pada nilai data `count`. Setiap kali nilai `count` berubah, watcher akan mengeksekusi tindakan yang didefinisikan di dalamnya, yaitu mencetak pesan ke konsol dengan nilai lama dan nilai baru dari `count`.

Ketika tombol "Increment" di klik, nilai `count` akan bertambah satu dan watcher akan mengeksekusi tindakan sesuai dengan definisinya di dalam properti `watch`.

Dengan menggunakan watchers, kita dapat mengambil tindakan tertentu ketika terjadi perubahan pada data di dalam komponen, seperti memperbarui tampilan, memanggil metode lain, atau memperbarui data lain yang terkait.

Lifecycle Hooks

Lifecycle hooks atau hook siklus hidup adalah metode yang disediakan oleh Vue.js untuk menjalankan kode pada tahap-tahap tertentu dalam siklus hidup komponen. Setiap komponen pada Vue.js memiliki siklus hidup yang terdiri dari beberapa tahap, seperti pembuatan, update, dan penghancuran komponen. Dengan menggunakan lifecycle hooks, kita dapat menentukan kode yang akan dijalankan pada tahap-tahap tertentu dalam siklus hidup komponen.

Terdapat beberapa lifecycle hooks pada Vue.js, yaitu:

`beforeCreate`: dijalankan sebelum instance komponen dibuat. Pada tahap ini, data dan metode pada komponen belum diinisialisasi.

Berikut merupakan contoh program Vue.js yang menggambarkan Lifecycle Hook `beforeCreate`:

<!DOCTYPE html>

<html>

<head>

<title>Vue.js beforeCreate Lifecycle Hook</title>

</head>

<body>

<h1>{{ message }}</h1>

</div>

new Vue({

el: '#app',

data: {

message: 'Hello, Vue.js!'

beforeCreate: function() {

console.log('beforeCreate hook triggered');

// LAKUKAN SESUATU SEBELUM INSTANCE VUE DIBUAT

}

});

</script>

</body>

</html>

Pada contoh di atas, kita mendefinisikan sebuah div dengan id "app" di dalam body HTML. Kemudian, kami membuat instance Vue dan menghubungkannya dengan elemen "app". Di dalam objek Vue, kita memiliki properti data "message" yang diikat ke elemen h1 dalam div "app". Selain itu, kita juga mendefinisikan siklus hidup `beforeCreate` sebagai fungsi yang akan dipanggil sebelum instance Vue dibuat. Di contoh ini, kita hanya mencetak pesan "beforeCreate hook triggered" ke konsol untuk menunjukkan bahwa hook tersebut telah dipanggil. Kalian dapat menambahkan logika atau melakukan tindakan lain yang diperlukan di dalam fungsi `beforeCreate`. Kode program ini akan menghasilkan halaman HTML yang menampilkan teks "Hello, Vue.js!" dengan memanfaatkan siklus hidup `beforeCreate` untuk melakukan tindakan tertentu sebelum instance Vue dibuat.

`created`: dijalankan setelah instance komponen dibuat. Pada tahap ini, data dan metode pada komponen sudah diinisialisasi dan dapat diakses.

Berikut merupakan contoh program Vue.js yang menggambarkan Lifecycle Hook `created`:

<!DOCTYPE html>

<html>

<head>

<title>Vue.js created Lifecycle Hook</title>

</head>

<body>

<h1>{{ message }}</h1>

</div>

new Vue({

el: '#app',

data: {

message: 'Hello, Vue.js!'

created: function() {

console.log('created hook triggered');

// Lakukan sesuatu setelah instance Vue dibuat

// dan properti data diinisialisasi

}

});

</script>

</body>

</html>

Pada contoh di atas, kita memiliki struktur dasar yang sama seperti contoh sebelumnya. Kita membuat instance Vue dan menghubungkannya dengan elemen "app". Properti data "message" diikat ke elemen h1 dalam div "app". Kemudian, kita mendefinisikan siklus hidup `created` sebagai fungsi yang akan dipanggil setelah instance Vue dibuat dan properti data diinisialisasi. Di dalam fungsi `created`, kita mencetak pesan "created hook triggered" ke konsol untuk menunjukkan bahwa hook tersebut telah dipanggil. Kalian dapat menambahkan logika atau melakukan tindakan lain yang diperlukan di dalam fungsi "created". Kode program ini akan menghasilkan halaman HTML yang menampilkan teks "Hello, Vue.js!" dengan memanfaatkan siklus hidup "created" untuk melakukan tindakan tertentu setelah instance Vue dibuat dan properti data diinisialisasi.

`beforeMount`: dijalankan sebelum komponen dipasangkan (mounted) ke DOM. Pada tahap ini, template pada komponen belum diubah menjadi elemen HTML.

Berikut merupakan contoh program Vue.js yang menggambarkan Lifecycle Hook `beforeMount`:

<!DOCTYPE html>

<html>

<head>

<title>Vue.js beforeMount Lifecycle Hook</title>

</head>

<body>

<h1>{{ message }}</h1>

</div>

new Vue({

el: '#app',

data: {

message: 'Hello, Vue.js!'

beforeMount: function() {

console.log('beforeMount hook triggered');

// Lakukan sesuatu sebelum instance Vue dipasang ke DOM

}

});

</script>

</body>

</html>

Pada contoh di atas, kita memiliki struktur dasar yang sama dengan contoh sebelumnya. Kita membuat instance Vue dan menghubungkannya dengan elemen "app". Properti data "message" diikat ke elemen h1 dalam div "app". Kemudian, kita mendefinisikan siklus hidup `beforeMount` sebagai fungsi yang akan dipanggil sebelum instance Vue dipasang ke DOM. Di dalam fungsi `beforeMount`, kita mencetak pesan "beforeMount hook triggered" ke konsol untuk menunjukkan bahwa hook tersebut telah dipanggil. Kalian dapat menambahkan logika atau melakukan tindakan lain yang diperlukan di dalam fungsi `beforeMount`. Kode program ini akan menghasilkan halaman HTML yang menampilkan teks "Hello, Vue.js!" dengan memanfaatkan siklus hidup `beforeMount` untuk melakukan tindakan tertentu sebelum instance Vue dipasang ke DOM.

`mounted` dijalankan setelah komponen dipasangkan (mounted) ke DOM. Pada tahap ini, template pada komponen sudah diubah menjadi elemen HTML dan dapat diakses melalui DOM.

Berikut merupakan contoh program Vue.js yang menggambarkan Lifecycle Hook `mounted`:

<!DOCTYPE html>

<html>

<head>

<title>Vue.js mounted Lifecycle Hook</title>

</head>

<body>

<h1>{{ message }}</h1>

</div>

new Vue({

el: '#app',

data: {

message: 'Hello, Vue.js!'

mounted: function() {

console.log('mounted hook triggered');

// Lakukan sesuatu setelah instance Vue dipasang ke DOM

}

});

</script>

</body>

</html>

Pada contoh di atas, kita membuat instance Vue dan menghubungkannya dengan elemen "app". Properti data "message" diikat ke elemen h1 dalam div "app". Kemudian, kita mendefinisikan siklus hidup `mounted` sebagai fungsi yang akan dipanggil setelah instance Vue dipasang ke DOM. Di dalam fungsi `mounted`, kita mencetak pesan "mounted hook triggered" ke konsol untuk menunjukkan bahwa hook tersebut telah dipanggil. Kalian dapat menambahkan logika atau melakukan tindakan lain yang diperlukan di dalam fungsi `mounted`. Kode program ini akan menghasilkan halaman HTML yang menampilkan teks "Hello, Vue.js!" dan mencetak pesan "mounted hook triggered" ke konsol setelah instance Vue dipasang ke DOM.

`beforeUpdate`: dijalankan sebelum data pada komponen diperbarui dan sebelum render ulang. Pada tahap ini, data pada komponen belum diupdate.

Berikut merupakan contoh program Vue.js yang menggambarkan Lifecycle Hook `beforeUpdate`:

<!DOCTYPE html>

<html>

<head>

<title>Vue.js beforeUpdate Lifecycle Hook</title>

</head>

<body>

<h1>{{ message }}</h1>

<button @click="updateMessage">Update Message</button>

</div>

new Vue({

el: '#app',

data: {

message: 'Hello, Vue.js!'

methods: {

updateMessage: function() {

this.message = 'Updated Message';

}

beforeUpdate: function() {

console.log('beforeUpdate hook triggered');

// Lakukan sesuatu sebelum update terjadi

}

});

</script>

</body>

</html>

Pada contoh di atas, kita membuat instance Vue dan menghubungkannya dengan elemen "app". Properti data "message" diikat ke elemen h1 dalam div "app". Kita juga menambahkan tombol yang akan memicu pembaruan pesan ketika diklik. Kemudian, kita mendefinisikan siklus hidup `beforeUpdate` sebagai fungsi yang akan dipanggil sebelum pembaruan instance Vue terjadi. Di dalam fungsi `beforeUpdate`, kita mencetak pesan "beforeUpdate hook triggered" ke konsol untuk menunjukkan bahwa hook tersebut telah dipanggil. Kalian dapat menambahkan logika atau melakukan tindakan lain yang diperlukan sebelum pembaruan terjadi di dalam fungsi `beforeUpdate`. Kode program ini akan menghasilkan halaman HTML yang menampilkan teks "Hello, Vue.js!" dan tombol "Update Message". Ketika tombol ditekan, pesan akan diperbarui menjadi "Updated Message". Sebelum pembaruan terjadi, fungsi `beforeUpdate` akan dipanggil dan mencetak pesan "beforeUpdate hook triggered" ke konsol.

`updated`: dijalankan setelah data pada komponen diperbarui dan setelah render ulang. Pada tahap ini, data pada komponen sudah diupdate dan perubahan dapat dilihat pada tampilan aplikasi.

Berikut merupakan contoh program Vue.js yang menggambarkan Lifecycle Hook `updated`:

<!DOCTYPE html>

<html>

<head>

<title>Vue.js updated Lifecycle Hook</title>

</head>

<body>

<h1>{{ message }}</h1>

<button @click="updateMessage">Update Message</button>

</div>

new Vue({

el: '#app',

data: {

message: 'Hello, Vue.js!'

methods: {

updateMessage: function() {

this.message = 'Updated Message';

}

updated: function() {

console.log('updated hook triggered');

// Lakukan sesuatu setelah update terjadi

}

});

</script>

</body>

</html>

Pada contoh di atas, kita membuat instance Vue dan menghubungkannya dengan elemen "app". Properti data "message" diikat ke elemen h1 dalam div "app". Kita juga menambahkan tombol yang akan memicu pembaruan pesan ketika diklik. Kemudian, kita mendefinisikan siklus hidup `updated` sebagai fungsi yang akan dipanggil setelah pembaruan instance Vue terjadi. Di dalam fungsi `updated`, kita mencetak pesan "updated hook triggered" ke konsol untuk menunjukkan bahwa hook tersebut telah dipanggil. Kalian dapat menambahkan logika atau melakukan tindakan lain yang diperlukan setelah pembaruan terjadi di dalam fungsi `updated`. Kode program ini akan menghasilkan halaman HTML yang menampilkan teks "Hello, Vue.js!" dan tombol "Update Message". Ketika tombol ditekan, pesan akan diperbarui menjadi "Updated Message". Setelah pembaruan terjadi, fungsi "updated" akan dipanggil dan mencetak pesan "updated hook triggered" ke konsol.

`beforeUnmount`: dijalankan sebelum komponen dihapus dari DOM. Pada tahap ini, komponen masih terpasang pada DOM.

Berikut merupakan contoh program Vue.js yang menggambarkan Lifecycle Hook `beforeUnmount`:

<!DOCTYPE html>

<html>

<head>

<title>Vue.js beforeUnmount Lifecycle Hook</title>

</head>

<body>

<h1>{{ message }}</h1>

<button @click="destroy">Destroy Component</button>

</div>

new Vue({

el: '#app',

data: {

message: 'Hello, Vue.js!'

methods: {

destroy: function() {

this.$destroy();

}

beforeUnmount: function() {

console.log('beforeUnmount hook triggered');

// Lakukan sesuatu sebelum komponen di-unmount

}

});

</script>

</body>

</html>

Pada contoh di atas, kita membuat instance Vue dan menghubungkannya dengan elemen "app". Properti data "message" diikat ke elemen h1 dalam div "app". Kita juga menambahkan tombol yang akan menghancurkan komponen Vue ketika diklik. Ketika tombol di klik, metode "destroy" dipanggil, dan kita menggunakan $destroy untuk menghancurkan komponen Vue. Sebelum komponen di-"unmount" atau dihancurkan, siklus hidup `beforeUnmount` akan dipanggil. Di dalam fungsi `beforeUnmount`, kami mencetak pesan "beforeUnmount hook triggered" ke konsol untuk menunjukkan bahwa hook tersebut telah dipanggil. Kalian dapat menambahkan logika atau melakukan tindakan lain yang diperlukan sebelum komponen dihancurkan di dalam fungsi `beforeUnmount`. Kode program ini akan menghasilkan halaman HTML yang menampilkan teks "Hello, Vue.js!" dan tombol "Destroy Component". Ketika tombol ditekan, komponen Vue akan dihancurkan, dan fungsi `beforeUnmount` akan dipanggil dan mencetak pesan "beforeUnmount hook triggered" ke konsol.

`unmounted`: dijalankan setelah komponen dihapus dari DOM. Pada tahap ini, komponen sudah tidak terpasang pada DOM dan tidak dapat diakses lagi.

Berikut merupakan contoh program Vue.js yang menggambarkan Lifecycle Hook `unmounted`:

<!DOCTYPE html>

<html>

<head>

<title>Vue.js unmounted Lifecycle Hook</title>

</head>

<body>

<h1>{{ message }}</h1>

<button @click="destroy">Destroy Component</button>

</div>

new Vue({

el: '#app',

data: {

message: 'Hello, Vue.js!'

methods: {

destroy: function() {

this.$destroy();

}

unmounted: function() {

console.log('unmounted hook triggered');

// Lakukan sesuatu setelah komponen di-unmount

}

});

</script>

</body>

</html>

Pada contoh di atas, kita membuat instance Vue dan menghubungkannya dengan elemen "app". Properti data "message" diikat ke elemen h1 dalam div "app". Kita juga menambahkan tombol yang akan menghancurkan komponen Vue ketika diklik. Ketika tombol di klik, metode "destroy" dipanggil, dan kita menggunakan $destroy untuk menghancurkan komponen Vue. Setelah komponen di-"unmount" atau dihancurkan, siklus hidup `unmounted` akan dipanggil. Di dalam fungsi `unmounted`, kita mencetak pesan "unmounted hook triggered" ke konsol untuk menunjukkan bahwa hook tersebut telah dipanggil. Kalian dapat menambahkan logika atau melakukan tindakan lain yang diperlukan setelah komponen dihancurkan di dalam fungsi `unmounted`. Kode program ini akan menghasilkan halaman HTML yang menampilkan teks "Hello, Vue.js!" dan tombol "Destroy Component". Ketika tombol ditekan, komponen Vue akan dihancurkan, dan fungsi `unmounted` akan dipanggil dan mencetak pesan "unmounted hook triggered" ke konsol.

Dengan menggunakan lifecycle hooks, kita dapat mengontrol perilaku komponen pada setiap tahap dalam siklus hidupnya. Hal ini dapat membantu kita untuk melakukan tindakan yang sesuai pada waktu yang tepat, misalnya memuat data sebelum komponen dipasangkan ke DOM atau membersihkan sumber daya setelah komponen dihapus dari DOM.

Component

Component adalah blok-blok bangunan UI yang dapat digunakan secara berulang dan memiliki logika serta tampilan yang terpisah. Dalam Vue, component membantu dalam memisahkan dan mengatur kode yang terkait dengan tampilan, logika, dan gaya yang terkait dengan bagian tertentu dari aplikasi.

Berikut adalah contoh sederhana penggunaan component Vue:

Dalam contoh di atas, kami memiliki satu komponen Vue yang disebut "my-component". Di dalam komponen ini, kami mendefinisikan template menggunakan sintaksis Vue. Template ini berisi elemen `<div>` dengan teks "Test Component.

Selanjutnya, kami mendaftarkan komponen menggunakan `Vue.component()`. Metode ini memungkinkan kami untuk mendaftarkan komponen agar dapat digunakan di dalam instance Vue.

Di dalam instance Vue, kami menggunakan `el` untuk menentukan elemen dengan `id="app"` sebagai tempat di mana instance Vue akan "melekat". Dalam hal ini, komponen `my-component` akan ditampilkan di dalam elemen tersebut.

Ketika halaman HTML dijalankan, komponen Vue akan di render di dalam elemen dengan `id="app"`, dan output yang dihasilkan akan menjadi:

Anda dapat menggabungkan logika, data, dan fungsi lainnya ke dalam komponen Vue untuk membuat komponen yang lebih kompleks dan interaktif.

Pada component vue.js juga terdapat SFC atau Single File Component yang merupakan pendekatan pengembangan yang dapat menulis kode HTML, CSS, dan JavaScript terkait komponen dalam satu file tunggal.

Dalam SFC, sebuah komponen Vue dijelaskan dalam satu file dengan ekstensi .vue. File ini terdiri dari tiga bagian utama yaitu template, script, dan style.

● Bagian template berisi markup HTML yang mendefinisikan struktur komponen dan bagaimana komponen berinteraksi dengan data.

● Bagian script berisi kode JavaScript yang mengendalikan perilaku komponen, termasuk properti, metode, dan siklus hidup.

● Bagian style berisi aturan CSS untuk mengatur tampilan dan gaya komponen.

Dengan menggunakan SFC, kalian dapat mengorganisir kode komponen Vue dengan lebih terstruktur dan mudah dibaca. Selain itu, SFC memungkinkan pembagian komponen menjadi file-file terpisah yang dapat digunakan kembali dan dipelihara dengan lebih efisien. Berikut merupakan langkah-langkah untuk membuat program SFC pada vue.js yang diimplementasikan langsung dengan menggunakan vue router.

Inisialisasi Proyek

Pada langkah pertama ini pastikan kalian telah melakukan instalasi Node.js pada perangkat kalian masing-masing, selanjutnya buka terminal dan lakukan instalasi Vue CLI dengan menggunakan perintah di bawah

npm install -g @vue/cli

Setelah selesai melakukan instalasi Vue CLI, langkah selanjutnya yaitu membuat proyek Vue.js baru dengan menggunakan perintah di bawah pada terminal

vue create nama-proyek

Setelah menjalankan perintah tersebut maka terminal akan meminta konfigurasi yang diperlukan untuk proyek Vue.js yang akan kalian buat, pada kasus ini pilih opsi Manually select features dan centang Router untuk mengaktifkan Vue Router seperti gambar di bawah.

Lalu selanjutnya pilih versi Vue.js yang akan digunakan pada proyek, pada kasus ini pilihlah Vue.js versi 3, kemudian ikuti instruksi pada layar terminal untuk menyelesaikan proses inisialisasi proyek. Lalu langkah selanjutnya yaitu pindah direktori ke tempat proyek yang telah kalian buat dengan menggunakan perintah cd nama-proyek. Pastikan folder pada editor kalian masing-masing juga telah berpindah ke direktori proyek kalian berada.

Konfigurasi Vue Router

Buka file `src/router/index.js` dan pastikan file tersebut sudah ada. Lalu selanjutnya pastikan kode berikut telah ada di dalam file `index.js` untuk mengimpor Vue dan Vue Router serta mengkonfigurasi router.

import { createRouter, createWebHistory } from 'vue-router'

import HomeView from '../views/HomeView.vue'

const routes = [

{

path: '/',

name: 'home',

component: HomeView

{

path: '/about',

name: 'about',

// route level code-splitting

// this generates a separate chunk (about.[hash].js) for this route

// which is lazy-loaded when the route is visited.

component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

}

]

const router = createRouter({

history: createWebHistory(process.env.BASE_URL),

routes

})

export default router

Membuat Komponen SFC

Buka direktori `src/views` dan pastikan telah terdapat file `AboutView.vue` dan `HomeView.vue`. Pastikan juga kode program pada file tersebut telah sesuai.

Menghubungkan Komponen dengan Router

Buka file `src/App.vue` dan pastikan file tersebut sudah ada. Lalu pastikan juga kode program pada file tersebut telah sesuai.

Menjalankan Aplikasi

Untuk menjalankan aplikasi yang telah dibuat, gunakan perintah di bawah pada terminal

npm run serve

Setelah menjalankan perintah di atas pada terminal, buka browser kalian masing-masing dan akses `http://localhost:8080` (atau alamat yang ditampilkan di terminal). Jika berhasil maka tampilan akan seperti gambar di bawah

Demikianlah langkah-langkah untuk membuat program SFC pada Vue.js yang diimplementasikan dengan Vue Router. Kalian dapat menambahkan rute-rute lain dan mengembangkan lebih lanjut komponen-komponen sesuai kebutuhan proyek Kalian.

Source:

https://vuejs.org/

Soal

Jelaskan Apa Itu Yang Dimaksud Lifecycle Hooks!
Fitur yang memungkinkan kita untuk mengamati perubahan pada data di dalam komponen Vue disebut?
Apa itu Directive?
Apa kegunaan Component dalam Vue Js?
Unmounted dijalankan ketika?
Apa itu SFC?

Quiz

Directive v-bind dalam Vue.js digunakan untuk:

Menghubungkan data pada komponen dengan tampilan
Menghubungkan event pada komponen dengan metode
Menghubungkan CSS pada komponen dengan tampilan
Menghubungkan komponen dengan komponen lainnya

Apa yang dilakukan oleh directive v-if pada Vue.js?

Mengatur tampilan elemen berdasarkan kondisi yang diberikan
Menambahkan atribut khusus pada elemen
Menyematkan komponen ke dalam elemen
Mengatur event listener pada elemen

Computed properties dalam Vue.js digunakan untuk:

Mengobservasi perubahan data secara langsung
Melakukan operasi komputasi pada data dan mengembalikan hasilnya
Mengelola state global pada aplikasi
Mengatur perubahan tampilan berdasarkan event yang terjadi

Watcher dalam Vue.js digunakan untuk:

Memantau perubahan pada data tertentu dan melakukan tindakan sesuai dengan perubahannya
Menyematkan komponen ke dalam elemen
Mengelola state global pada aplikasi
Mengatur event listener pada elemen

Lifecycle hook yang pertama kali dipanggil saat komponen Vue.js sedang dibuat adalah:

beforeCreate
created
beforeMount
mounted

Vue.js mengizinkan komponen-komponen untuk berkomunikasi antara satu sama lain menggunakan:

Props
Data
Methods
Watchers

Apa yang dimaksud dengan SFC (Single File Component) dalam Vue.js?

Komponen yang terdiri dari satu file JavaScript saja
Komponen yang terdiri dari satu file HTML saja
Komponen yang terdiri dari satu file CSS saja
Komponen yang terdiri dari satu file yang menggabungkan JavaScript, HTML, dan CSS

Dalam Vue.js, properti ____________ digunakan untuk menerima data yang dikirimkan dari komponen induk ke komponen anak.

watch
computed
data
props

Lifecycle hook yang dipanggil setelah komponen Vue.js selesai dirender ke DOM adalah:

beforeUpdate
updated
beforeUnmount
unmounted

Vue.js memfasilitasi pembuatan komponen reusable dengan menggunakan fitur:

Mixins
Directives
Filters
Templates

Last modified: Monday, 7 August 2023, 10:10 AM