1. Basic Component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Basic Component</title>
</head>
<body>
<div id="app">
<!-- Pemanggilan component yang telah dibuat -->
<hello-there></hello-there>
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">
// proses pembuatan component bernama hello-there
Vue.component("hello-there", {
data() {
return {
message: "Hello there!"
};
},
// templating untuk HTML agar menampilkan pesan Hello There dengan element Heading 1
template: "<h1>{{message}}</h1>"
});
//Deklarasi Objek Vue dengan target elemen dengan id app
let vm = new Vue({
el: "#app"
});
</script>
</html>
2. Global Component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Global Component</title>
</head>
<body>
<!-- Komponen global ini bisa dipanggil diberbagai target element VueJS. -->
<div id="app1">
<!-- target pertama dengan memanggil komponen global component-a -->
<h1>Objek 1</h1>
<component-a></component-a>
<component-b></component-b>
</div>
<div id="app2">
<!-- target kedua dengan memanggil komponen global yang sama yaitu component-a -->
<h1>Objek 2</h1>
<component-a></component-a>
<component-c></component-c>
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">
// Vue.component berfungsi untuk menggenerate component baru secara global(bisa di akses dimana saja)
Vue.component("component-a", {
template: `<p>Component a</p>`
});
Vue.component("component-b", {
template: `<p>Component b</p>`
});
Vue.component("component-c", {
template: `<p>Component c</p>`
});
// membuat 2 target untuk pengetesan komponen global.
new Vue({ el: "#app1" });
new Vue({ el: "#app2" });
</script>
</html>
3. Local Component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Local Component</title>
</head>
<body>
<div id="app">
<h1>Objek Local</h1>
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">
// pembuatan component local berbeda dengan component global, untuk local perlu adanya variabel untuk menampung component tersebut.
let ComponentA = {
template: `<p>Component A</p>`
};
let ComponentB = {
template: `<p>Component B</p>`
};
let ComponentC = {
template: `<p>Component C</p>`
};
new Vue({
el: "#app",
components: {
"component-a": ComponentA,
"component-b": ComponentB,
"component-c": ComponentC
}
});
</script>
</html>
4. Passing data to Component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Passing Data</title>
<style>
.card {
background: #efefef;
border: 1px solid #ddd;
margin-right: 5px;
padding: 5px;
width: 200px;
float: left;
}
</style>
</head>
<body>
<div id="app">
<!-- Menggunakan component local dengan nama book -->
<!-- dalam component tersebut, terdapat 3 props dan diisi secara manual -->
<book title="Belajar menulis" desc="apa aja" image="1.jpg"></book>
</div>
<script src="lib/vue.js"></script>
<script>
// membuat component local dengan nama BookComponent
let BookComponent = {
data() {
return {
cssCard: "card"
};
},
// props berfungsi sebagai media parsing data dari element ke variabel VueJS.
// terdapat 3 props yaitu title, desc dan image.
props: ["title", "desc", "image"],
// isi dari template ini adalah untuk menampilkan data yang telah terkirim/tersimpan pada props.
template: `
<div :class="cssCard">
<h3>{{title}}</h3>
<img :src="'images/'+image" style="width:100%">
<p v-html="desc"></p>
</div>
`
};
new Vue({
el: "#app",
components: {
book: BookComponent
}
});
</script>
</body>
</html>
5. Directive pada Component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Passing Data</title>
<style>
.card {
background: #efefef;
border: 1px solid #ddd;
margin-right: 5px;
padding: 5px;
width: 200px;
float: left;
}
</style>
</head>
<body>
<div id="app">
<book v-for="book in books" :key="book.id" :book="book"></book>
</div>
<script src="lib/vue.js"></script>
<script>
let BookComponent = {
data() {
return {
cssCard: "card"
};
},
props: ["book"],
template: `
<div :class="cssCard">
<h3>{{book.title}}</h3>
<img :src="'images/'+book.image" style="width:100%">
<p v-html="book.desc"></p>
</div>
`
};
new Vue({
el: "#app",
components: {
book: BookComponent
},
data: {
books: [
{
id: 1,
title: "Books 1",
desc: "Description of books 1",
image: "1.jpg",
authors: "Johny Depp",
publish: 2020,
price: 150000
},
{
id: 2,
title: "Books 2",
desc: "Description of books 2",
image: "2.jpg",
authors: "Taylor",
publish: 2021,
price: 250000
},
{
id: 3,
title: "Books 3",
desc: "Description of books 3",
image: "3.jpg",
authors: "Swift",
publish: 2018,
price: 150000
}
]
}
});
</script>
</body>
</html>
Output
 |
| Sama seperti sebelumnya, tetapi pada kali ini Component local diisi dengan v-for untuk pemanggilan data dari vuejs. |
6. Update Data Parent From Component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Passing Data</title>
<style>
.card {
background: #efefef;
border: 1px solid #ddd;
margin-right: 5px;
padding: 5px;
width: 200px;
float: left;
}
</style>
</head>
<body>
<div id="app">
<h1>Selected : {{selectedBook}}</h1>
<!-- Selected berfungsi untuk menyimpan event yang sedang terjadi kedalam variabel selectedBook dalam vueJs. -->
<book
v-for="book in books"
:key="book.id"
:book="book"
@selected="selectedBook = $event"
></book>
</div>
<script src="lib/vue.js"></script>
<script>
let BookComponent = {
data() {
return {
cssCard: "card"
};
},
props: ["book"],
// pada akhir template ini, terdapat button yang berfungsi untuk memanggil judul buku ketika button diklik.
template: `
<div :class="cssCard">
<h3>{{book.title}}</h3>
<img :src="'images/'+book.image" style="width:100%;height:150px;">
<p v-html="book.desc"></p>
<button @click="$emit('selected', book.title)">Select</button>
</div>
`
};
new Vue({
el: "#app",
components: {
book: BookComponent
},
data: {
books: [
{
id: 1,
title: "Books 1",
desc: "Description of books 1",
image: "1.jpg",
authors: "Johny Depp",
publish: 2020,
price: 150000
},
{
id: 2,
title: "Books 2",
desc: "Description of books 2",
image: "2.jpg",
authors: "Taylor",
publish: 2021,
price: 250000
},
{
id: 3,
title: "Books 3",
desc: "Description of books 3",
image: "3.jpg",
authors: "Swift",
publish: 2018,
price: 150000
}
],
selectedBook: ""
}
});
</script>
</body>
</html>
Output
7. Update Data Parent From Component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Passing Data</title>
<style>
.card {
background: #efefef;
border: 1px solid #ddd;
margin-right: 5px;
padding: 5px;
width: 200px;
float: left;
}
</style>
</head>
<body>
<div id="app">
<alert>
<p>Kenapa memilih mundur jika ada pilihan untuk bersyukur?</p>
</alert>
<br />
<h1>Selected : {{selectedBook}}</h1>
<book
v-for="book in books"
:key="book.id"
:book="book"
@selected="selectedBook = $event"
></book>
</div>
<script src="lib/vue.js"></script>
<script>
// slot berfungsi untuk mengirimkan elemen html ataupun template kedalam html.
Vue.component("alert", {
template: `
<div class="card">
<strong>Alert</strong>
<hr>
<slot></slot>
</div>
`
});
let BookComponent = {
data() {
return {
cssCard: "card"
};
},
props: ["book"],
template: `
<div :class="cssCard">
<h3>{{book.title}}</h3>
<img :src="'images/'+book.image" style="width:100%;height:150px;">
<p v-html="book.desc"></p>
<button @click="$emit('selected', book.title)">Select</button>
</div>
`
};
new Vue({
el: "#app",
components: {
book: BookComponent
},
data: {
books: [
{
id: 1,
title: "Books 1",
desc: "Description of books 1",
image: "1.jpg",
authors: "Johny Depp",
publish: 2020,
price: 150000
},
{
id: 2,
title: "Books 2",
desc: "Description of books 2",
image: "2.jpg",
authors: "Taylor",
publish: 2021,
price: 250000
},
{
id: 3,
title: "Books 3",
desc: "Description of books 3",
image: "3.jpg",
authors: "Swift",
publish: 2018,
price: 150000
}
],
selectedBook: ""
}
});
</script>
</body>
</html>
8. Single File Component
1. Pada bagian single file component, disarankan menggunakan local server untuk menjalankannya.
2. Buat file baru dengan nama BookComponent.js
BookComponent.js
// fungsi export berguna untuk mengeksport component/variabel dalam javascript.
export const BookComponent = {
data() {
return {
cssCard: "card"
};
},
props: ["book"],
template: `
<div :class="cssCard">
<h3>{{book.title}}</h3>
<img :src="'images/'+book.image" style="width:100%;height:150px;">
<p v-html="book.desc"></p>
<button @click="$emit('selected', book.title)">Select</button>
</div>
`
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Passing Data</title>
<style>
.card {
background: #efefef;
border: 1px solid #ddd;
margin-right: 5px;
padding: 5px;
width: 200px;
float: left;
}
</style>
</head>
<body>
<div id="app">
<alert>
<p>Kenapa memilih mundur jika ada pilihan untuk bersyukur?</p>
</alert>
<br />
<h1>Selected : {{selectedBook}}</h1>
<book
v-for="book in books"
:key="book.id"
:book="book"
@selected="selectedBook = $event"
></book>
</div>
<script src="lib/vue.js"></script>
<script type="module">
// component global harus ada paling atas(?)
Vue.component("alert", {
template: `
<div class="card">
<strong>Alert</strong>
<hr>
<slot></slot>
</div>
`
});
//Syarat untuk mengimport sebuah component external yaitu type script dengan module.
import { BookComponent } from "./lib/BookComponent.js"; //mengimport BookComponent(nama komponen) dan menentukan path component tersebut.
let vm = new Vue({
el: "#app",
components: {
book: BookComponent
},
data: {
books: [
{
id: 1,
title: "Books 1",
desc: "Description of books 1",
image: "1.jpg",
authors: "Johny Depp",
publish: 2020,
price: 150000
},
{
id: 2,
title: "Books 2",
desc: "Description of books 2",
image: "2.jpg",
authors: "Taylor",
publish: 2021,
price: 250000
},
{
id: 3,
title: "Books 3",
desc: "Description of books 3",
image: "3.jpg",
authors: "Swift",
publish: 2018,
price: 150000
}
],
selectedBook: ""
}
});
</script>
</body>
</html>
Output
9. Dynamic Components dan Transition Efect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Passing Data</title>
<style>
.card {
background: #efefef;
border: 1px solid #ddd;
margin-right: 5px;
padding: 5px;
width: 200px;
float: left;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<!-- Saat button ditekan, button memanggil variabel currentComponent dengan isi list/detail sesuai dengan pilihan user. -->
<button @click="currentComponent = 'list'">List</button>
<button @click="currentComponent = 'detail'">Detail</button>
<hr />
<transition name="fade" mode="out-in">
<component :is="currentComponent"></component>
</transition>
</div>
<script src="lib/vue.js"></script>
<script type="text/javascript">
let list = {
template: `
<div class="card">
<strong>Bahasa Pemrograman</strong>
<ul>
<li>PHP</li>
<li>Javascript</li>
<li>Java</li>
</ul>
</div>
`
};
let detail = {
template: `
<div class="card">
<strong>PHP</strong>
<p>PHP adalah singkatan dari Hypertext Preprocessor.</p>
</div>
`
};
let vm = new Vue({
el: "#app",
data: {
currentComponent: "list"
},
components: {
list: list,
detail: detail
}
});
</script>
</body>
</html>
10. Mixins
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mixins</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// membuat mixin pada kondisi created dan memanggil method hello
let MixinHello = {
created: function() {
this.hello();
},
methods: {
hello: function() {
console.log("Hello from mixin!");
}
}
};
let vm = new Vue({
el: "#app",
// mengisi mixins dengan MixinHello yang telah dibuat diatas.
mixins: [MixinHello]
});
</script>
</body>
</html>
Perbedaan Local Component dengan Global Component
Perbedaannya terletak pada penggunaan component dan cara penulisan kode component, local component memerlukan variabel untuk menampung sebuah component. Untuk global component tidak memerlukan variabel terlebih dahulu, dan bisa di akses di target elemen vue mana saja.
Mixins
Mixins pada vue adalah sebuah fitur yang reusable untuk component vue. Mixin adalah perpaduan antara fitur-fitur yang ada dalam vuejs.
0 komentar: