Halo manteman
udah lama banget ya ga upload, biasa liburan mager upload hahaha
sekarang aku lagi belajar web 2.0 di kampus nah materi pertama tuh tentang vue js. apasih vue js itu?
tanpa banyak basa-basi langsung aja ke TE KA PE
dilansir dari petanikode.com,
Vue.js adalah sebuah framework Javascript untuk membuat user interface dan single-page application (SPA).
Vue.js dikenal juga dengan Vue saja dan dieja seperti membaca kata view (/vju:/).1
Pada arsitektur MVC (Model–View–Controller), Vuejs hanya akan mengambil peran pada layer View saja.
Yang penting Vue bisa menerima dan mengirim data, lalu membuat tampilan user interface (UI).
Pada dasarnya, fitur utama Vue lebih fokus pada rendering dan komposisi komponen.
Naah sekarang udah mulai tau kan apa itu vue js secara sekilas?
di sini aku mau ngasih tutorial sederhana tentang vue js agar lebih dapat terbayangkan.
1. Buat dulu struktur seperti ini.
2. Masuk ke vue.js isikan code yang ada pada link ini https://vuejs.org/js/vue.js
jangan lupa save.
Sebenarnya kalian bisa menggabungkan vue.js dan file html kalian dalam satu folder namun disini aku tidak menggabungkan agar lebih mudah me-management nya dan terlihat lebih rapih saja.
3. Masuk pada file html yang kalian telah buat "nah ini namanya filenya juga boleh bebas" lalu isikan dengan code berikut.
jangan lupa save.
4. kalo udah nyalakan dulu xampp nya lalu tes di browser, bila sukses maka akan muncul tampilan seperti ini.
5. Lalu klik kanan dan pilih inspect element(Q).
6. Pilih tab console.
7. lalu ketikan code seperti ini.
maka hasilnya akan menjadi seperti ini.
lalu isi bagian yang belum terisi dengan cara yang sama dan variable yang di tentukan.
:D
Ta da ~
Selesai deh, masih bingung ya dengan code diatas?
aku kasih penjelasannya deh .
PENJELASAN
1. Di sini vue akan berjalan bila dikasih html.karena vue itu cuma framework javascript, kalo ga ada html vue ga akan jalan , contohnya tuh kalian punya alat make up tapi ga punya muka buat di rias ya masa ngerias tembok ? kwkwk
2. Di dalam html kenapa ada
ini adalah alamat yang fungsinya untuk menghubungkan si html dengan vue js (wajib ada).
jika kalian menggabungkan antara html dan vue js nya kalian hanya perlu menghilangkan path "lib/" nya.
3. Di dalam body terdapat <div> ini fungsinya untuk membungkus codingan yang akan dijalankan.
4. Kenapa aku kasih div nya seperti ini?
id ini fungsinya sebagai tanda pengenal
5. Di dalam div terdapat double kurungkurawal itu berfungsi sebagai penanda di dalam kurung tersebut terdapat sebuah variable yang akan di manipulasi oleh si vue js, contoh dibawah ini variablenya adalah nama (ingat variable dapat diubah semau kalian)
lanjut kebagian js nya
6. Di sini seperti biasa masukan code <script></script>
7. Di dalamnya terdapat
code diatas fungsinya untuk membuat objek baru dari si vue nya dinamai dd (sekali lagi kalian bebas mengetik apapun karena ini variable)
8. Di dalam var dd terdapat el: , apa itu el: dan kenapa harus el: ?
el: itu fungsinya untuk menargetkan si html yang akan dijalankan sebelumnya aku udah kasih tau <div> aku kasih id "dari" nah di dalam el: aku tinggal isi dengan id div tersebut.
nah syntax di atas akan menargetkan div yang ber id kan dari.
9. lalu ada data setelah el: nah si data ini tuh fungsinya untuk memasukkan isi variable yang telah di tentukan contoh
nah variable ini akan di panggil ke div yang ber id kan "dari" dan akan menempati di sini
bila kita tambah isi data dengan beberpa variable seperti ini
maka variable-variable ini akan menempati posisi mereka masing-masing sesuai yang dipanggil disini
Kalian bisa isikan variable-variable di atas pada browser bagian inspect element(Q) di dalam console
ketika kalian ketikan dd.nama="sandy satria buana"
maka pada bagian "Nama :" akan terisi dengan "sandy satria buana"
setelah kalian isikan semua variable-variable dengan cara yang sama seperti "nama" barusan kalian dapat mengubahnya dengan cara ketikan lagi pada bagian console contoh dd.nama="sandy", maka bagian "Nama :" akan berubah isinya menjadi "sandy"
mungkin segitu dulu aja ya, kalo belum paham coba baca lagi dari awal dan ikutin step by step ya :D
semoga bermanfaat
terima kasih udah mau baca blog aku :)
udah lama banget ya ga upload, biasa liburan mager upload hahaha
sekarang aku lagi belajar web 2.0 di kampus nah materi pertama tuh tentang vue js. apasih vue js itu?
tanpa banyak basa-basi langsung aja ke TE KA PE
dilansir dari petanikode.com,
Vue.js adalah sebuah framework Javascript untuk membuat user interface dan single-page application (SPA).
Vue.js dikenal juga dengan Vue saja dan dieja seperti membaca kata view (/vju:/).1
Pada arsitektur MVC (Model–View–Controller), Vuejs hanya akan mengambil peran pada layer View saja.
Yang penting Vue bisa menerima dan mengirim data, lalu membuat tampilan user interface (UI).
Pada dasarnya, fitur utama Vue lebih fokus pada rendering dan komposisi komponen.
Naah sekarang udah mulai tau kan apa itu vue js secara sekilas?
di sini aku mau ngasih tutorial sederhana tentang vue js agar lebih dapat terbayangkan.
1. Buat dulu struktur seperti ini.
2. Masuk ke vue.js isikan code yang ada pada link ini https://vuejs.org/js/vue.js
jangan lupa save.
Sebenarnya kalian bisa menggabungkan vue.js dan file html kalian dalam satu folder namun disini aku tidak menggabungkan agar lebih mudah me-management nya dan terlihat lebih rapih saja.
3. Masuk pada file html yang kalian telah buat "nah ini namanya filenya juga boleh bebas" lalu isikan dengan code berikut.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DataDiri</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="dari">
Nama : <b>{{ nama }} </b> <br>
Prodi : <b> {{ prodi }} </b> <br>
Tahun angkatan : <b> {{ angkatan }} </b> <br>
Email : <b>{{ email }} </b> <br>
</div>
<script type="text/javascript">
var dd = new Vue({
el:'#dari', data: {
nama:'',
prodi:'',
angkatan:'',
email:''
}
})
</script>
</body>
</html>
jangan lupa save.
4. kalo udah nyalakan dulu xampp nya lalu tes di browser, bila sukses maka akan muncul tampilan seperti ini.
5. Lalu klik kanan dan pilih inspect element(Q).
6. Pilih tab console.
7. lalu ketikan code seperti ini.
maka hasilnya akan menjadi seperti ini.
lalu isi bagian yang belum terisi dengan cara yang sama dan variable yang di tentukan.
:D
Ta da ~
Selesai deh, masih bingung ya dengan code diatas?
aku kasih penjelasannya deh .
PENJELASAN
1. Di sini vue akan berjalan bila dikasih html.karena vue itu cuma framework javascript, kalo ga ada html vue ga akan jalan , contohnya tuh kalian punya alat make up tapi ga punya muka buat di rias ya masa ngerias tembok ? kwkwk
2. Di dalam html kenapa ada
<script src="lib/vue.js"></script>
ini adalah alamat yang fungsinya untuk menghubungkan si html dengan vue js (wajib ada).
jika kalian menggabungkan antara html dan vue js nya kalian hanya perlu menghilangkan path "lib/" nya.
<script src="vue.js"></script>
3. Di dalam body terdapat <div> ini fungsinya untuk membungkus codingan yang akan dijalankan.
4. Kenapa aku kasih div nya seperti ini?
<div id="dari">
id ini fungsinya sebagai tanda pengenal
5. Di dalam div terdapat double kurungkurawal itu berfungsi sebagai penanda di dalam kurung tersebut terdapat sebuah variable yang akan di manipulasi oleh si vue js, contoh dibawah ini variablenya adalah nama (ingat variable dapat diubah semau kalian)
Nama : <b>{{ nama }} </b> <br>
lanjut kebagian js nya
6. Di sini seperti biasa masukan code <script></script>
7. Di dalamnya terdapat
var dd = new Vue
code diatas fungsinya untuk membuat objek baru dari si vue nya dinamai dd (sekali lagi kalian bebas mengetik apapun karena ini variable)
8. Di dalam var dd terdapat el: , apa itu el: dan kenapa harus el: ?
el: itu fungsinya untuk menargetkan si html yang akan dijalankan sebelumnya aku udah kasih tau <div> aku kasih id "dari" nah di dalam el: aku tinggal isi dengan id div tersebut.
el:'#dari'
nah syntax di atas akan menargetkan div yang ber id kan dari.
<div id="dari">
9. lalu ada data setelah el: nah si data ini tuh fungsinya untuk memasukkan isi variable yang telah di tentukan contoh
data: {
nama:'',
nah variable ini akan di panggil ke div yang ber id kan "dari" dan akan menempati di sini
Nama : <b>{{ nama }} </b> <br>
bila kita tambah isi data dengan beberpa variable seperti ini
maka variable-variable ini akan menempati posisi mereka masing-masing sesuai yang dipanggil disini
<div id="dari">
Nama : <b>{{ nama }} </b> <br>
Prodi : <b> {{ prodi }} </b> <br>
Tahun angkatan : <b> {{ angkatan }} </b> <br>
Email : <b>{{ email }} </b> <br>
</div>
Kalian bisa isikan variable-variable di atas pada browser bagian inspect element(Q) di dalam console
ketika kalian ketikan dd.nama="sandy satria buana"
setelah kalian isikan semua variable-variable dengan cara yang sama seperti "nama" barusan kalian dapat mengubahnya dengan cara ketikan lagi pada bagian console contoh dd.nama="sandy", maka bagian "Nama :" akan berubah isinya menjadi "sandy"
mungkin segitu dulu aja ya, kalo belum paham coba baca lagi dari awal dan ikutin step by step ya :D
semoga bermanfaat
terima kasih udah mau baca blog aku :)
Comments
Post a Comment