Praktikum 3

Latihan 1

Object Vue
Create, Update, Destroy, Mount

 <!DOCTYPE html>  
 <html class="no-js">  
 <head>  
   <title>Latihan no 1</title>  
   <script src="lib/vue.js"></script>  
 </head>  
 <body>  
   <div id="app">  
     <h1>{{ pesan }}</h1>  
   </div>  
   <script type="text/javascript">  
     var vm = new Vue({  
       el: '#app',  
       data: {  
         pesan: 'Coba latihan nomer 1'  
       },  
       beforeCreate() {  
         console.log('beforeCreate: ' + 'pesan = ' + this.pesan)  
       },  
       created() {  
         console.log('created: ' + 'pesan = ' + this.pesan)  
       },  
       beforeMount() {  
         console.log('beforeMount: ' + 'el = ' + this.$el.textContent)  
       },  
       mounted() {  
         console.log('mounted: ' + 'el = ' + this.$el.textContent)  
       },  
       beforeDestroy() {  
         console.log('beforeDestroy')  
       },  
       destroyed() {  
         console.log('destroyed')  
       },  
       beforeUpdate() {  
         console.log('beforeUpdate: ' + 'el = ' + this.$el.textContent)  
       },  
       updated() {  
         console.log('updated: ' + 'el = ' + this.$el.textContent)  
       }  
     })  
     vm.$destroy()  
   </script>  
 </body>  
 </html>

Hasilnya





Latihan 2

Template Vue
Property Template, Data Raw dan Data Attribute

 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Latihan Soal 2</title>  
   <script src="lib/vue.js"></script>  
   <style type="text/css">  
     .jurusan {  
       color: blue;  
     }  
   </style>  
 </head>  
 <body>  
   <div id="template"></div>  
   <script type="text/javascript">  
     var vu = new Vue({  
       el: '#template',  
       data: {  
         message: "Hello World",  
       },  
       template: "<h1>{{message}}</h1></br>{{nama}}</br>{{ti}}"  
     })  
   </script>  
   <div id="data2">  
     <h1 v-html="nama"></h1>  
     <h1 v-bind:class="prodi">{{ ti }}</h1>  
   </div>  
   <script type="text/javascript">  
     var vm = new Vue({  
       el: '#data2',  
       data: {  
         nama: "<span style='color:red'>Saya Nashrul Ahsanu Nadiya</a>",  
         ti: "Teknik Informatika",  
         prodi: "jurusan"  
       }  
     })  
   </script>  
 </body>  
 </html>

Hasilnya


Latihan 3


Kalkulator Sederhana dengan Vue

 <!DOCTYPE html>  
 <html>  
 <head>  
   <title>Latihan Soal 3</title>  
   <script src="lib/vue.js"></script>  
 </head>  
 <body>  
   <div id="app">  
     <form method="post" action="latihan3.html">  
       <h4>Nilai 1</h4>  
       <input type="number" name="bil2" v-model="bil1">  
       <h4>Nilai 2</h4>  
       <input type="number" name="bil2" v-model="bil2"><br><br><br>  
       <button onclick="vm.tambah()">+</button>  
       <button onclick="vm.kurang()">-</button>  
       <button onclick="vm.bagi()">/</button>  
       <button onclick="vm.kali()">x</button>  
       <h4>Hasil</h4>  
       <h1>{{ hasil }}</h1>  
     </form>  
   </div>  
   <script type="text/javascript">  
     var vm = new Vue({  
       el: '#app',  
       data: {  
         bil1: 0,  
         bil2: 0,  
         hasil: 0  
       },  
       methods: {  
         tambah() {  
           this.hasil = parseFloat(this.bil1) + parseFloat(this.bil2);  
         },  
         kurang() {  
           this.hasil = parseFloat(this.bil1) - parseFloat(this.bil2);  
         },  
         kali() {  
           this.hasil = parseFloat(this.bil1) * parseFloat(this.bil2);  
         },  
         bagi() {  
           this.hasil = parseFloat(this.bil1) / parseFloat(this.bil2);  
         }  
       }  
     })  
   </script>  
 </body>  
 </html>

Hasilnya


Komentar

Posting Komentar

Postingan Populer