Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Menampilkan Value dari Tag Input di vueJS. Vue adalah kerangka kerja JavaScript untuk membangun antarmuka pengguna. Bagian utamanya difokuskan terutama pada lapisan pandang dan sangat mudah dimengerti. Versi Vue yang akan kita gunakan dalam tutorial ini adalah 2.0. Karena pada dasarnya Vue dibangun untuk pengembangan frontend, kita akan banyak bermain dengan banyak file HTML, JavaScript dan CSS di materi ini. Untuk memahami detilnya, mari kita mulai dengan contoh sederhana.
Kita akan membuat contoh sederhana tentang vueJS, yaitu Cara Menampilkan Value dari Tag Input di vueJS. Silahkan Anda simak tentang bagaimana caranya menampilkan value pada tag input.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<html> <head> <title>Cara Menampilkan Value di vueJS</title> </head> <body> <div id="root"> <input type="text" id="input" v-model="message"> <p>nilai inputnya adalah : {{ message }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <script> let d = { message:'Hello Word' }; new Vue({ el : '#root', data: d }) </script> </body> </html> |
Oke kalau sudah saya akan menjelaskan dari script di atas,
|
1 |
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> |
Script di atas berfungsi untuk memangil file vue dari vuejs.org
Dalam contoh kode di atas, saya memanggil contoh Vue, yang mengambil id dari elemen DOM yaitu el: ‘# root’, ini adalah id dari div. Dimana saya akan memberikan sebuah data “Hello Word”. VueJS berinteraksi dengan DOM dan mengubah nilainya di DOM {{message}} dengan ‘Hello Word’. Jika kebetulan kita mengubah nilai pesan di tag input, hal yang sama akan juga merubah tampilan di nilai p.
Oke itulah tadi pembahasan saya tentang Cara Menampilkan Value dari Tag Input di vueJS, semoga bermanfaat.