A. Membua 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 akan tampil hasilnya.
Pertama buat file baru dengan kode seperti ini:
<!DOCTYPE html>
<html>
<head>
<title> calculator </title>
<script src="lib/vue.js"></script>
<style type="text/css">
*{
font-family: parchment;
font-size: 50px;
}
.row{
margin-bottom: 20px;
}
.input1{
margin-left: 20px;
padding: 10px;
}
.input2{
margin-left: 16.5px;
padding: 10px;
}
.ml-75{
margin-left: 75px;
}
button{
font-family: sans-serif;
font-size: 30px;
height: 40px;
width: 40px;
}
</style>
</head>
<body>
<div id="app">
<div class="row">
<label> Angka 1 :</label>
<input type="number" class="angka1" v-model="angka1">
</div>
<div class="row">
<label> Angka 2 :</label>
<input type="number" class="angka2" v-model="angka2">
</div>
<div class=" row ml-75">
<button onclick="vm.tambah()">+</button>
<button onclick="vm.kurang()">-</button>
<button onclick="vm.kali()">x</button>
<button onclick="vm.bagi()">/</button>
</div>
<div class="row ml-75=">
<label>Hasil :</label>
<span>{{ hasil }}</span>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data : {
angka1:0,
angka2:0,
hasil:0
},
methods : {
tambah(){
this.hasil = parseInt(this.angka1) + parseInt(this.angka2)
},
kurang(){
this.hasil = parseInt(this.angka1) - parseInt(this.angka2)
},
kali(){
this.hasil = parseInt(this.angka1) * parseInt(this.angka2)
},
bagi(){
this.hasil = parseInt(this.angka1) / parseInt(this.angka2)
},
}
})
</script>
</body>
</html>
Pada kode berikut di atas setiap kita memasukkan angka ke variable ;Angka 1' dan 'Angka 2' maka angka di dalam itulah yang akan diproses nantinya. Variable awal dari semuanya adalah '0' dan proses tambah, kurang kali dan baginya akan diproses pada method tambah(), kurang(), kali() dan bagi(). Dan hasilnya akan seperti ini;
dan jika melakukan penghitungan akan seperti ini: (method tambah)
B. Membuat template vue yang menggabungkan property template, data raw dan data attribute.dan membuat penerapan siklus Object Vue
Buat file baru dengan kode seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.title{
color: yellow;
}
</style>
</head>
<body>
<div id="app">
<h1>{{ atas }}</h1>
<h1 v-html="dataRaw"></h1>
<h1 v-bind:class="kelas1"> {{ Atribute }}</h1>
</div>
<script type="text/javascript">
var vm = new Vue ({
el : '#app',
data : {
atas : "Hai",
dataRaw : "<span style = 'color:blue '>Selamat Pagi</a>",
Atribute : "Sehat Sehat Ya",
kelas1 : "title"
},
beforeCreate () {
console.log('before create:'+'atas='+ this.atas)
},
created () {
console.log('created: '+ 'atas =' + this.atas)
},
beforeMount() {
console.log('before Mount'+'atas = '+ this.$el.textContent)
},
mounted () {
console.log(' Mounted '+' atas =' + this.$el.textContent)
},
beforeUpdate () {
console.log('beforeUpdate ='+'el = ' + this.$el.textContent)
},
updated() {
console.log('Updated = '+'el' + this.$el.textContent)
},
beforeDestroy () {
console.log('before Destroy')
},
Destroy() {
console.log('Destroyed')
}
})
vm.$destroy()
</script>
</body>
</html>
Pada kode diatas kita mempunyai template yang berisi tag html h1, yang akan menampilkan teks message, h1 juga mempunyai v-bind:class dengan nama kelas1 yang diambil dari data, variable kelas1 ini mempuyai value title yang artinya kelas1 sama dengan title jadi pada tag h1 ini akan memanggil class css .title, dan hasilnya akan di render pada div id=app.
- Apabila dijalankan, akan tampil seperti berikut :
- Apabila dijalankan, akan tampil seperti berikut :
Dan untuk penerapan Object Vue
- penjelasan :
a. fungsi Create untuk meng create
b. fungsi mount adalah untuk meng mount : Kode diatas akan mencoba mengakses DOM dengan menggunakan fungsi bawaan js, yaitu textContent. textContent ini berfungsi untuk menampilkan konten teks yang ada di dalam el.
c. update untuk mengupdate data
d. Destroye untuk mendestroy atau meng hapus data
Tidak terjadi apapun namun di console terlihat sebelum dan sesudah script dieksekusi
Tidak ada komentar:
Posting Komentar