Halo semua!!
Kali ini aku dikasih tugas lanjutan dari minggu kemarin nihh.
tugas 1 yaitu membuat penerapan beberapa directive
tugas 2 yaitu membuat sebuah list dalam bentuk collection untuk menampilkan produk online shop.
ok langsung aja kuyy...
Directive ada beberapa diantaranya v-if, v-on, v-bind
V - IF
1. Buatlah sebuah file bernama v-if.html
2. masukkan code dibawah ini.
disini aku pakai cuaca sebagai data dari sebuah kondisi...
coba jalankan pada browser
hasilnya seperti dibawah ini.
coba kita ganti kondisi cuacanya menjadi hujan di dalam inspect dengan mengetik vm.cuaca="hujan"
hasilnya akan menjadi seperti ini.
selesai.
penjelasan :
codingan diatas adalah sebuah IF dalam versi vue.js yang dimana fungsinya digunakan untuk beberapa kondisi seperti pada umumnya.
Pada directive ini juga mempunyai reactive yang ketika kita ubah di dalam console seperti diatas maka dia akan mengeluarkan hasil yang berbeda pada kondisi awal.
V-ON
1.Buatlah file dengan nama v-on.html
2.Masukkan code di bawah ini.
hasilnya seperti di bawah ini.
coba klik pada masing-masing button dan sebuah link
hasilnya.
1.
2.
3.
untuk yang ke-3 ketika kita klik "Oke", kita akan langsung dibawa ke link yang telah kita masukan.
Selesai.
Penjelasan:
codingan diatas adalah sebuah button yang dapat bereaksi jika kita klik dan reaksi yang ditimbulkan berbeda-beda tergantung menggunakan methods ataupun di dalam sebuah data, di dalam methods codingan diatas pun menghasilkan hal yang berbeda antara 'text' dan 'link'. "Text" hanya akan menampilkan sebuah text dan ketika kita klik Oke pada notif yang muncul hanya akan menutup notif nya saja, namun jika itu "Link" maka ketika kita klik Oke kita akan dibawa ke situs yang telah kita tentukan.
V-BIND
1. Buatlah sebuah file bernama v-bind.html
2. Masukkan code di bawah ini.
hasilnya.
setelah 5 detik
selesai.
Penjelasan:
codingan di atas adalah mengaitkan atau bahasa inggrisnya itu Bind-ing , variable src mengaitkan gambar sehingga atribut dari src isi nilainya yang di "gambar", lalu terdapat "setTimeout" di dalamnya ada vm.gambar = 'image.png' (gambar lain) setelah kurung penutup terdapat angka "5000" itu adalah lamanya waktu untuk mengubah gambar 1 dengan gambar 2, 5000 berarti 5 detik.
Selanjutnya tugas ke 2 yaitu membuat list collection untuk produk onlineshop.
1. buatlah file .html kalian masing".
2. masukkan code dibawah ini.
hasilnya akan seperti ini.
Selesai.
Kali ini aku dikasih tugas lanjutan dari minggu kemarin nihh.
tugas 1 yaitu membuat penerapan beberapa directive
tugas 2 yaitu membuat sebuah list dalam bentuk collection untuk menampilkan produk online shop.
ok langsung aja kuyy...
Directive ada beberapa diantaranya v-if, v-on, v-bind
V - IF
1. Buatlah sebuah file bernama v-if.html
2. masukkan code dibawah ini.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>belajar vue</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="cuaca === 'hujan'">memakai payung</div>
<div v-else-if="cuaca === 'mendung'">membawa payung</div>
<div v-else>tidak membawa payung</div>
</div>
<script type="text/javascript">
var vm= new Vue({
el:'#app',
data:{
cuaca:"mendung",
}
})
</script>
</body>
</html>
disini aku pakai cuaca sebagai data dari sebuah kondisi...
coba jalankan pada browser
hasilnya seperti dibawah ini.
coba kita ganti kondisi cuacanya menjadi hujan di dalam inspect dengan mengetik vm.cuaca="hujan"
hasilnya akan menjadi seperti ini.
selesai.
penjelasan :
codingan diatas adalah sebuah IF dalam versi vue.js yang dimana fungsinya digunakan untuk beberapa kondisi seperti pada umumnya.
Pada directive ini juga mempunyai reactive yang ketika kita ubah di dalam console seperti diatas maka dia akan mengeluarkan hasil yang berbeda pada kondisi awal.
V-ON
1.Buatlah file dengan nama v-on.html
2.Masukkan code di bawah ini.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>belajar vue</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="aduh">
<button v-on:click="jumlah +=1">
Jumlah
</button>
<p>Ada sapi sebanyak {{jumlah}} ekor.</p>
<button v-on:click="sapaan('hallo semua')">
Hi!
</button>
<br>
<a href="https://www.livechart.me" v-on:click="situs">
Anime Schedule
</a>
</div>
<script type="text/javascript">
var abc = new Vue ({
el:'#aduh',
data:{
jumlah:0
},
methods:{
sapaan(text){
alert(text)
},
situs(){
alert('klik')
}
}
})
</script>
</body>
</html>
hasilnya seperti di bawah ini.
coba klik pada masing-masing button dan sebuah link
hasilnya.
1.
2.
3.
untuk yang ke-3 ketika kita klik "Oke", kita akan langsung dibawa ke link yang telah kita masukan.
Selesai.
Penjelasan:
codingan diatas adalah sebuah button yang dapat bereaksi jika kita klik dan reaksi yang ditimbulkan berbeda-beda tergantung menggunakan methods ataupun di dalam sebuah data, di dalam methods codingan diatas pun menghasilkan hal yang berbeda antara 'text' dan 'link'. "Text" hanya akan menampilkan sebuah text dan ketika kita klik Oke pada notif yang muncul hanya akan menutup notif nya saja, namun jika itu "Link" maka ketika kita klik Oke kita akan dibawa ke situs yang telah kita tentukan.
V-BIND
1. Buatlah sebuah file bernama v-bind.html
2. Masukkan code di bawah ini.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>belajar vue</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="san">
<img v-bind:src="gambar" width="300">
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#san',
data:{
gambar:'786378.png'
}
})
setTimeout(()=>{
vm.gambar ='1046862.png'
},5000);
</script>
</body>
</html>
hasilnya.
setelah 5 detik
selesai.
Penjelasan:
codingan di atas adalah mengaitkan atau bahasa inggrisnya itu Bind-ing , variable src mengaitkan gambar sehingga atribut dari src isi nilainya yang di "gambar", lalu terdapat "setTimeout" di dalamnya ada vm.gambar = 'image.png' (gambar lain) setelah kurung penutup terdapat angka "5000" itu adalah lamanya waktu untuk mengubah gambar 1 dengan gambar 2, 5000 berarti 5 detik.
Selanjutnya tugas ke 2 yaitu membuat list collection untuk produk onlineshop.
1. buatlah file .html kalian masing".
2. masukkan code dibawah ini.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>belajar vue</title>
<script src="lib/vue.js"></script>
</head>
<body>
<h1>STORE OF GOODIES</h1>
<h2>Have a lot of stuff to buy, don't miss it!</h2>
<div id="barang">
<table border=1>
<tr v-for="goods of goodies">
<td>
<img width=100 :src="'images/'+goods.image">
</td>
<td>
name: {{goods.name}} <br>
category: {{goods.category}} <br>
published: {{goods.published}} <br>
store: {{goods.store}} <br>
description: {{goods.description}} <br>
price: {{goods.price}} <br>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#barang',
data:{
goodies:[
{
id:1,
name:'Fashion Men T-Shirt Now A Day',
category:'Adult Fashion',
published:2020,
store:'F&S.co',
description:'this t-shirt can make your day, good materials, low cost, high quality ',
price:'$55',
image:'t-shirt1.png'
},
{
id:2,
name:'Xiaomi Mi 10',
category :'Gadget & Electronics',
published:2020,
store:'Mi Store',
description:'The Cheapest flagship smartphone with 108mp Camera f.1/6 recording up to 8K 30fps got the First position at DX-O mark, Chipset Snapdragon 865 7nm, Amoled Display FHD Resolution curved, Storage up to 512',
price:'$787',
image:'phone1.png'
},
{
id:3,
name:'Ninja Jacket',
category :'Adult Fashion',
published:2020,
store:'F&S.co',
description:' Jacket ninja make you be a ninja for real, but we do not sell the peripheral, go buy it ',
price:'$75',
image:'jacket.jpg'
},
{
id:4,
name:'Samsung Galaxy S20 Ultra',
category :'Gadget & Electronics',
published:2020,
store:'Samsung Store',
description:'Behold the greatest smartphone in this era, 108mp Camera, 3k Resolution Display also an Amoled Screen, Chipset Snapdragon 865 7nm or Chipset Exynos 990 7nm',
price:'$1400',
image:'phone2.png'
},
{
id:5,
name:'Coco Perfume',
category :'Adult Fashion',
published:2020,
store:'Chanel',
description:'Women`s stuff',
price:'$140',
image:'perfume_coco.jpg'
},
{
id:6,
name:'Asus TUF FX505DV',
category :'Gadget & Electronics',
published:2019,
store:'Asus',
description:'High Specification with AMD@ Ryzen 7 3750H, Geforce RTX 2060 GPU, 15.6inch FHD 144Hz IPS NanoEdge Display, military-grade MIL-STD-810G ',
price:'$1099',
image:'asus_tuf.jpg'
},
]
}
})
</script>
</body>
</html>
hasilnya akan seperti ini.
Selesai.
Comments
Post a Comment