Instalasi vue.js<\/h1>\n\n\n\n
Perlu diketahui bahwa vue tidak mendukung browser IE8 dan versi-versi sebelumnya. Ada beberapa cara instalasi vue namun cara yang paling mudah adalah melalui CDN karena kita tidak perlu menyimpan file Vue.js di dalam\u00a0project<\/em>\u00a0kita. Berikut ini adalah contoh bagaimana mereferensikan vue dari CDN: Dengan mereferensikan vue dari CDN seperti cara diatas, maka kita akan secara otomatis mendapatkan versi vue terbaru yang sudah ada di CDN.<\/p>\n\n\n\n Seperti halnya pada saat mempelajari bahasa pemrograman lain, kita awali dengan menampilkan \u201cHello World<\/em>\u201d. Di sini saya akan menuliskan cara konvensional dan cara vue. Skenarionya adalah kita membuat sebuah input element<\/em> dan pada input element<\/em> tersebut kita akan menuliskan \u201cHello World<\/em>\u201d dan pada bagian bawahnya akan ada paragraf yang menyatakan nilai dari input element<\/em> tersebut. Apabila kita merubah nilai input element<\/em> maka keterangan di bagian bawahnya juga akan ikut berubah. Kira-kira seperti ini kodenya:<\/p>\n\n\n\n a. Dengan cara konvensional<\/p>\n\n\n\n Apabila kita buka file HTML tersebut di web browser maka tampilannya seperti ini: b. Dengan cara vue<\/p>\n\n\n\n Kode ini juga akan menghasilkan tampilan yang kurang lebih sama dengan kode di awal tadi, ada text input dan ada paragraf yang menyatakan nilai dari input element<\/em>. Perilakunya ketika input element<\/em> tersebut berubah nilainya akan mempengaruhi isi dari paragraf dibawahnya juga sama. Yang membedakan dari dua contoh kode diatas ada pada kerumitan kodenya. Dengan cara yang konvensional, kita membutuhkan suatu event listener<\/em> semisal keyup<\/em> ataupun keydown<\/em> supaya perubahan dapat terjadi secara otomatis namun tidak demikian apabila menggunakan vue.<\/p>\n\n\n\n Untuk menggunakan vue, pertama-tama kita buat vue instance<\/em> dahulu, pada contoh kode diatas adalah Setelah semua langkah tersebut sudah kita lakukan, kita cek ke browser dan apa yang akan terjadi? Browser tidak menampilkan sesuatu yang kita inginkan, itu karena kita belum merelasikan vue tersebut dengan input element<\/em> yang ada. Untuk itu kita perlu menambahkan Apa Itu vue.js? Vue.js adalah suatu librari Javascript yang digunakan untuk membangun antar muka sebuah website yang interaktif. Supaya lebih singkat, untuk selanjutnya Vue.js saya tulis Vue. Library dari Vue difokuskan hanya … <\/p>\n","protected":false},"author":1,"featured_media":101,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[],"class_list":["post-100","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-teknologi","category-tips-belajar"],"_links":{"self":[{"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/posts\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":6,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/posts\/100\/revisions"}],"predecessor-version":[{"id":109,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/posts\/100\/revisions\/109"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/media\/101"}],"wp:attachment":[{"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/categories?post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/tags?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/p>\n\n\n\n<!DOCTYPE html><\/td><\/tr> <html lang=”en”><\/td><\/tr> <head><\/td><\/tr> <meta charset=”UTF-8″><\/td><\/tr> <title>Vue1<\/title><\/td><\/tr> <\/head><\/td><\/tr> <body><\/td><\/tr> <script src=”https:\/\/unpkg.com\/vue”><\/script><\/td><\/tr> <\/body><\/td><\/tr> <\/html><\/td><\/tr><\/tbody><\/table>\n\n\n\n Data Binding<\/h1>\n\n\n\n
![\"\"](\"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-content\/uploads\/2020\/02\/a.jpg\")
<\/figure>\n\n\n\n
<\/p>\n\n\n\n![\"\"\/](\"https:\/\/miro.medium.com\/max\/579\/1*mOgxC8lgh565yq171gFsTw.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-content\/uploads\/2020\/02\/b.jpg\")
<\/figure>\n\n\n\nnew Vue({})<\/code>. Langkah selanjutnya adalah menentukan sebuah model yang berasosiasi dengan vue tersebut, pada contoh kode diatas adalah data<\/code> yang nantinya semua object<\/em> yang ada di dalamnya dapat ditampilkan. Langkah terakhir adalah kita tentukan area kerja dari vue. Pada kode diatas saya menggunakan div<\/code> dengan ID \u201croot<\/em>\u201d dan di dalam vue instance <\/em>ditulisel: '#root'.<\/code><\/p>\n\n\n\nv-model<\/code> di input element dan kemudian kita tambahkan <p> value dari input adalah: {{message}}. <\/p><\/code> di bawah input element<\/em> tadi. Apabila kita refresh halaman browser maka pada input element<\/em> tadi akan tertulis \u201cHello World\u201d dan nilai dari tag p adalah \u201cvalue dari input adalah: Hello World\u201d. Apabila kita rubah nilai dari input element<\/em> maka secara otomatis nilai dari tag p juga akan berubah.<\/p>\n","protected":false},"excerpt":{"rendered":"