Tantangan :
1. Buatlah penerapan berbagai macam directive dengan studi kasus lain yang berbeda dari contoh.
2. Buatlah sebuah list dalam bentuk collection yang menampilkan data produk onlineshop, lengkap dengan gambar dan desain template yang bagus.
Sebelum memulai tantangan, pastikan library vue sudah di download dan tersimpan di dalam project
1. if directive
<!DOCTYPE html>studi kasus diatas adalah untuk menentukan nilai akhir dan mencetak data nya ke dalam html. terdapat tag vue v-if={data} operator adalah untuk melakukan kondisi dengan ketentuan yang ditentukan. v-if-else={data} operator adalah untuk kondisi lebih dari 1 dan v-else adalah jika semua kondisi tidak terpenuhi maka akan menjalankan kondisi ini.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>If Directive Example</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tr>
<td>Nama</td>
<td>{{nama}}</td>
</tr>
<tr>
<td>Nim</td>
<td>{{nim}}</td>
</tr>
<tr>
<td>Jurusan</td>
<td>{{jurusan}}</td>
</tr>
<tr>
<td>Nilai Akhir</td>
<td v-if="nilai >=85 && nilai <=100">A</td>
<td v-else-if="nilai >=75 && nilai <85">B</td>
<td v-else-if="nilai >=65 && nilai <75">C</td>
<td v-else-if="nilai >=55 && nilai <65">D</td>
<td v-else="nilai">E</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
nilai: "80",
nama: "Ahmad Dikri ALPAKIH",
nim: "D11171002",
jurusan: "Teknik Informatika",
}
})
</script>
</body>
</html>
2. v-bind directive
<!DOCTYPE html>directive bind gunanya untuk menyambungkan attribute apa saja untuk elemen HTML-nya. Pada contoh diatas menyambungkan style kedalam tag <p> color dan font size nya. Dimana property style nya berada pada instance vue data:{activeColor:'red',fontSize:30} dan di include ke dalam element ini <p v-bind:style="{color:activeColor,fontSize :fontSize + 'px'}">Hello World</p> yang nanti hasilnya menjadi Hello World warna merah dan font size nya 30.
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Bind Directive Example</title>
<script src="../lib/vue.js"></script>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div id="app">
<p v-bind:style="{color:activeColor,fontSize :fontSize + 'px'}">Hello World</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
activeColor: 'red',
fontSize: 30
}
})
</script>
</body>
</html>
3. v-on directive
<!DOCTYPE html>v-on directive biasanya digunakan untuk sebuah event dimana di dalamnya terdapat event onClick,onKeyUp dan lainya, dan mengeksekusi method yang akan dijalankan sesuai kebutuhan.
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>V-on Directive Example</title>
<script src="../lib/vue.js"></script>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div id="app">
Penjumlahan 2 nilai
<table>
<tr>
<td>Nilai 1</td>
<td>
<input v-model=nilai1 type="text">
</td>
</tr>
<tr>
<td>Nilai 2</td>
<td>
<input v-model=nilai2 type="text">
</td>
</tr>
</table>
<button v-on:click="cetak()">Kalkulasi</button>
<p>Hasilnya : {{hasil}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
nilai1:0,
nilai2:0,
hasil:0,
},
methods: {
cetak() {
this.hasil = parseInt(this.nilai1) + parseInt(this.nilai2)
},
}
})
</script>
</body>
</html>
Pada contoh diatas studi kasusnya menjumlahkan 2 nilai pada input. Cara untuk mengambil data input dalam text menggunakan tag v-model, lalu buat instance vue dengan data nilai1,nilai2,dan hasil yang diberi default 0. Setelah itu buat method untuk mencetak hasil dari input untuk dijumlahkan.Hasilnya akan di kalkulasi ketika menekan tombol Kalkulasi yang didalamnya menggunakan directive v-on:click yang akan mengeksekusi method cetak().
4. List collection vue
<!DOCTYPE html>pada contoh diatas membuat sebuah list dalam vue dengan nama products yang nantinya akan di loop ke dalam tag htmlnya
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop</title>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/vue.js"></script>
<script src="../lib/bootstrap.min.js" ></script>
<link href="../lib/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<section class="sections random-product">
<div class="container-fluid">
<div class="container">
<div class="row" id="app">
<div v-for="product of products" class="col-md-4">
<div class="card">
<img class="card-img-top" v-bind:src="product.image"
alt="Card image cap">
<div class="card-body">
<h5 class="card-title">
<a href="#" class="text-dark">{{product.name}}</a>
</h5>
<p>{{product.description}}</p>
<div class="float-left">
<p>Price : {{product.price}}</p>
</div>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary">Buy</a>
</div>
</div>
</div>
</div>
<!--.row-->
</div>
<!--.container-->
</div>
<!--.container-fluid-->
</section>
<script>
var vm = new Vue({
el: '#app',
data: {
products: [
{
name: 'MSI Modern 14-A10RB Grey',
description: 'Jual laptop MSI Modern 14-A10RB Grey',
price: 11000000,
image: 'MSI-Modern-14-A10RB-Grey.jpg'
},
{
name: 'ASUS ROG STRIX',
description: 'Jual laptop asus gaming ASUS ROG STRIX',
price: 12000000,
image: 'asus_rog_strix_g.jpeg'
},
{
name: 'DELL Inspirion 15 3584',
description: 'Jual laptop DELL Inspirion 15 3584',
price: 7000000,
image: 'dell-inspirion-15-3584.jpg'
},
{
name: 'ASUS ZENBOOL 13 UX331UAL',
description: 'Jual ASUS ZENBOOL 13 UX331UAL',
price: 8000000,
image: 'Asus_zenbook-13 UX331UAL.jpg'
},
{
name: 'HP Pavilion X-360',
descripton: 'Jual Laptop HP Pavilion X-360',
price: 75000000,
image: 'hp-pavilion-x360.jpg'
},
{
name: 'DELL INSPIRION 14 500 Series',
description: 'Jual laptopn DELL INSPIRION 14 500 Series',
price: 9000000,
image: 'ins-14-5000-serie.jpg'
}
]
},
})
</script>
</body>
</html>
jika dijalankan akan tampil seperti dibawah :
0 Komentar untuk "Vue Directive and List"