Tantangan :
1. Buatlah penerapan siklus object vue dengan studi kasus lain yang berbeda dari contoh.
2. Buatlah template vue sederhana yang menggabungkan property template, data raw dan data attribute.
3. Buatlah kalkulator sederhana yang memiliki inputan nilai 1 dan nilai 2, dengan 4 tombol perhitungan (tambah, kurang, kali, bagi). Ketika nilai telah diinput dan tombol di klik, tampilkan hasilnya.
Nomor 1 :
Buatlah struktur project seperti ini
Selanjutnya tantangan nomor 2 adalah manipulasi halaman html dengan template di vue. Buka file template.html lalu isi script sebagai berikut :
Terakhir tantangan ke 3 adalah membuat kalkulator sederhana menggunakan vue. Langsung saja buka file kalkulator.html, lalu isi script seperti dibawah :
1. Buatlah penerapan siklus object vue dengan studi kasus lain yang berbeda dari contoh.
2. Buatlah template vue sederhana yang menggabungkan property template, data raw dan data attribute.
3. Buatlah kalkulator sederhana yang memiliki inputan nilai 1 dan nilai 2, dengan 4 tombol perhitungan (tambah, kurang, kali, bagi). Ketika nilai telah diinput dan tombol di klik, tampilkan hasilnya.
Nomor 1 :
Buatlah struktur project seperti ini
setelah itu buat 3 file html dengan nama seperti diatas. Untuk sekarang akan mengerjakan tantangan ke 1, tentang contoh siklus object pada vue, buka file siklus-object.html dan rubah file seperti dibawah :
<!DOCTYPE html>penjelasan script diatas adalah mencoba siklus object pada vue dimana perubahan siklus object nya terdapat pada beberapa element dari mulai create, update, destroy, dan mount.
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Belajar Vue</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='vue/lib/vue.js'></script>
</head>
<body>
<div id="app1">
<h1>{{message1}}</h1>
</div>
<div id="app2">
<h1>{{message2}}</h1>
</div>
<div id="app3">
<h1>{{message3}}</h1>
</div>
<div id="app4">
<h1>{{message4}}</h1>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app1',
data: {
message1: 'Siklus Object Create',
},
beforeCreate() {
console.log('before create: ' +
'message = ' + this.message1)
},
created() {
console.log('created: ' +
'message = ' + this.message1)
},
});
var vm2 = new Vue({
el: '#app2',
data: {
message2: 'Siklus Object Mount',
},
beforeMount() {
console.log('before mount: ' +
'el = ' + this.$el.textContent)
},
mounted() {
console.log('mounted: ' +
'el = ' + this.$el.textContent)
},
});
var vm3 = new Vue({
el: '#app3',
data: {
message3: 'Siklus Object Update',
},
beforeUpdate() {
console.log('before update: ' +
'el = ' + this.$el.textContent)
},
updated() {
console.log('update: ' +
'el = ' + this.$el.textContent)
},
});
var vm4 = new Vue({
el: '#app4',
data: {
message4: 'Siklus Object Destroy',
},
beforeDestroy() {
console.log('before destroy')
},
destroyed() {
console.log('destroyed')
}
});
vm4.$destroy()
</script>
</body>
</html>
Selanjutnya tantangan nomor 2 adalah manipulasi halaman html dengan template di vue. Buka file template.html lalu isi script sebagai berikut :
<!DOCTYPE html>script diatas adalah contoh implementasi manipulasi halaman html menggunakan vue, dimana bisa menginclude kan halaman html pada suatu element tertentu, bisa memanipulasi style nya dan raw html.
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Belajar Vue</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='vue/lib/vue.js'></script>
<style type="text/css">
.font {
color: blue;
}
</style>
</head>
<body>
<div id="app">
</div>
<div id="app2">
<h1 v-bind:class="example_class"> {{message}} </h1><br>
<h3 v-html="message" v-bind:class="example_class">{{raw}}</h3>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app',
data: {
message: 'Contoh Template Vue',
example_class: 'font',
raw: '<span v-bind:class="example_class">Raw html</span>'
},
template: '<table border="1"><tr><td v-bind:class="example_class">Nama</td><td>Ahmad Dikri Alpakih</td></tr></table>',
});
var vm2 = new Vue({
el: '#app2',
data: {
message: 'Contoh Template Vue',
example_class: 'font',
raw: '<span v-bind:class="example_class">Raw html</span>'
},
});
</script>
</body>
</html>
Terakhir tantangan ke 3 adalah membuat kalkulator sederhana menggunakan vue. Langsung saja buka file kalkulator.html, lalu isi script seperti dibawah :
<!DOCTYPE html>script diatas adalah untuk membuat kalkulator sederhana menggunakan vue dengan cara mengambil nilai inputan dari form lalu membuat sebuah methods yang nantinya akan di panggil oleh events tertentu. Contoh diatas adalah ketika button di klik, maka akan menjalankan method sesuai dengan yang dibutuhkan.
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Belajar Vue</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='vue/lib/vue.js'></script>
</head>
<body>
<div id="app1">
<h1>{{message}}</h1>
<table>
<tr>
<td>Nilai 1</td>
<td> <input type="text" name="nilai1" ref="nilai1"></td>
</tr>
<tr>
<td>Nilai 2</td>
<td><input type="text" name="nilai2" ref="nilai2"></td>
</tr>
</table>
<button onclick="vm.tambah()"> + </button>
<button onclick="vm.bagi()"> / </button>
<button onclick="vm.kali()"> * </button>
<button onclick="vm.kurang()"> - </button><br>
<br>
Hasil : <label>{{hasil}}</label>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app1',
data: {
message: 'Kalkulator Sederhana',
hasil: 0,
},
methods: {
tambah() {
this.hasil = parseInt(this.$refs.nilai1.value) + parseInt(this.$refs.nilai2.value)
},
bagi() {
this.hasil = parseInt(this.$refs.nilai1.value) / parseInt(this.$refs.nilai2.value)
},
kali() {
this.hasil = parseInt(this.$refs.nilai1.value) * parseInt(this.$refs.nilai2.value)
},
kurang() {
this.hasil = parseInt(this.$refs.nilai1.value) - parseInt(this.$refs.nilai2.value)
}
}
});
</script>
</body>
</html>
0 Komentar untuk "Tantangan Vue"