Pada vue js ada beberapa bentuk data yang digunakan, kita bisa gunakan variabel biasa seperti yang di deklarasi menggunakan kata kunci const, var dan let. Namun untuk penggunaan suatu data yang akan kita tampilkan pada template kita perlu mengaksesnya dari object data: yang akan kita bahas pada tutorial kali ini.
Tujuan tulisan kali ini :
Dalam hal ini jika kita ingin menampilkan data yg telah kita tulis didalam blok data pada aplikasi vue js, maka di dalam template kita bisa menempelkannya di dalam kurung kurawal {{ disini }} dari contoh di atas saya akan menampilkan data yang bernama foo kemudian jika kita tekan tombol Change It, maka akan mengubah isi dari data foo menjadi baz, namun ini tidak akan ada dalam pembahasan kali ini. :D
Template dan Aplikasi vue js yang saya maksud di dalam tulisan ini adalah
- ini bisa di sebut template
maka dari contoh di atas hasil dari program yang kita buat akan menjadi seperti ini saat di jalankan di browser,
ok, itu adalah cara untuk menampilkan data di dalam sebuah template,
Sekarang kita akan menggunakan object DOM yaitu input untuk mengubah nilai data pada aplikasi vue secara langsung,
sebelumnya kita telah membuat script vue js-nya seperti ini
kita akan menggunakan salah satu object DOM yaitu input untuk mengubah nilai data pesan yang ada di dalam script vue js.
secara biasa kita ketahui object input yang bertype 'text' seperti berikut:
jawabnya mudah, cukup tempelkan atribut yang telah disediakan oleh vue js, yaitu atribut v-model kemudian didalam atribut v-model pasang data yang akan kita listen perubahannya contohnya adalah pesan, seperti berikut
Saya kira ini sudah jelas, jika ada pertanyaan silahkan bertanya :)
Tujuan tulisan kali ini :
- Untuk mengerti object data pada script vue js yang kita buat.
- Belajar cara menggunakan atribut yang di sediakan oleh vue js.
<div id="app"> <p>{{ foo }}</p> <!-- this will no longer update `foo`! --> <button v-on:click="foo = 'baz'">Change it</button> </div>Saya ulangi dari pembahasan tutorial sebelumnya, "jika kita ingin menggunakan vue js maka kita harus memilih object DOM-nya, nah disini pada baris pertama saya menggunakan object DIV", setelah kita memilih objectnya maka object-object DOM yang ada didalam object yang kita pilih tadi adalah object yang dapat di handle oleh vue js.
Dalam hal ini jika kita ingin menampilkan data yg telah kita tulis didalam blok data pada aplikasi vue js, maka di dalam template kita bisa menempelkannya di dalam kurung kurawal {{ disini }} dari contoh di atas saya akan menampilkan data yang bernama foo kemudian jika kita tekan tombol Change It, maka akan mengubah isi dari data foo menjadi baz, namun ini tidak akan ada dalam pembahasan kali ini. :D
Template dan Aplikasi vue js yang saya maksud di dalam tulisan ini adalah
- Kerangka HTML-nya bisa di sebut template
- script yang kita tulis di dalam object vue, bisa kita sebut aplikasi vue, untuk lebih jelasnya silahkan baca tutorial sebelumnya.
- ini bisa di sebut template
<div id="aplikasi">
{{ pesan }}
</div>
- ini bisa di sebut dengan aplikasi vue js-nyanew Vue({ el: '#aplikasi', data: { pesan: 'Hello Vue!' } })
maka dari contoh di atas hasil dari program yang kita buat akan menjadi seperti ini saat di jalankan di browser,
<div id="aplikasi">
Hello Vue
</div>
ok, itu adalah cara untuk menampilkan data di dalam sebuah template,
Sekarang kita akan menggunakan object DOM yaitu input untuk mengubah nilai data pada aplikasi vue secara langsung,
sebelumnya kita telah membuat script vue js-nya seperti ini
new Vue({ el: '#aplikasi', data: { pesan: 'Hello Vue!' } })dan template seperti ini :
<div id="aplikasi">
{{ pesan }}
</div>
full code dari ini adalah:<html> <head> <title>hello vue</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="aplikasi"> {{pesan}} </div> </body> <script> new Vue({ el: '#aplikasi', data: { pesan: 'Hello Vue!' } })</script> </html>
kita akan menggunakan salah satu object DOM yaitu input untuk mengubah nilai data pesan yang ada di dalam script vue js.
secara biasa kita ketahui object input yang bertype 'text' seperti berikut:
<input type='text'>
bagaimana kita gunakan object tersebut untuk mengubah nilai yang ada di dalam aplikasi vue kita?jawabnya mudah, cukup tempelkan atribut yang telah disediakan oleh vue js, yaitu atribut v-model kemudian didalam atribut v-model pasang data yang akan kita listen perubahannya contohnya adalah pesan, seperti berikut
<input type='text' v-model='pesan'>
di dalam contoh tersebut saya nge-listen data pesan, jadi apapun yang kita inputkan, akan secara langsung mengubah nilai dari data pesan, jadi full code dari aplikasi yang kita buat adalah seperti berikut,<html> <head> <title>hello vue</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="aplikasi"> {{pesan}} <input type='text' v-model='pesan'> </div> </body> <script> new Vue({ el: '#aplikasi', data: { pesan: 'Hello Vue!' } })</script> </html>
Saya kira ini sudah jelas, jika ada pertanyaan silahkan bertanya :)
Komentar
Posting Komentar