Methods, ES6 dan Directives di VueJS

Spread the love
Introduction VueJS - Regentechno

Methods, ES6 dan Directives di VueJS

Regentechno – Oke, lanjut dari artikel sebelumnya mengenai Introduction VueJS kali ini masih dengan series VueJS sekarang kita lanjut ke tahap selanjutnya. Pada artikel sebelumnya kita udah belajar mengenai property data yang ada dari Vue Instance, yang gunanya untuk pengiriman data seperti contoh dibawah ini :

Nah, sekarang bagaimana kalau kita ingin mengambil data dari Remote Services ? atau menggunakan beberapa function dari javascript secara lebih complex ? Kita membutuhkan property dari Vue Instance yang disebut Methods untuk melakukannya.

Sebagai contoh saya ingin menggabungkan nama saya menjadi satu nama “Alvin” + ” ” + “Corwin” sehingga menjadi Alvin Corwin ini mungkin sederhana dan bisa dilakukan dari template syntax VueJS tapi ketika memiliki dynamic variable kita membutuhkan method/function baru lagi untuk mengolahnya.
Contoh :

Seperti kita lihat diatas, terdapat function getFullName di dalam property methods di Vue Instance, method ini mengembalikan object dari propery data dengan cara return.
Dan mengambil object dari property data dengan cara this yang menyatakan bahwa this disini mengambil object dari Vue Instance, ini dikarenakan kita menggunakan

dalam mendeklarasikan atau membuat function. Jika kita menggunakan ES6 arrow function akan menghasilkan yang berbeda karena ES6 arrow function akan mengambil object dari Parent Instance

Menggunakan ES6 Arrow Function - Regentechno
Menggunakan ES6 Arrow Function
Menggunakan function VueJS - Regentechno
Menggunakan function VueJS

 

 

 

 

Selanjutnya adalah contoh ketika kita menggunakan parameter didalam function yang kita buat di methods property.

first, last diberikan dari template html yang merupakan value dari data instance seperti yang dari artikel sebelumnya

Nah, kalau yang ketiga ini kita menampilkan nama dari object yang diberikan dari methods getFullName() mari kita lihat :

disana dari method getFullName() memberikan object name yang merupakan gabungan seperti yang sebelumnya, sehingga untuk mengambil/menampilkan nama orangnya kita memberikan nama object yang akan diambil dengan setelah tanda “.” sehingga menjadi getFullName().name. Simple kan?

Nah, sekarang kita sudah mengetahui sedikit dari methods, data, es6 arrow function sekarang kita mau masuk ke Directives VueJS yah walaupun sebenarnya masih Introduction nya.

Propert url yang kita cantumkan tidak akan bisa diakses secara normal mengakses ke halaman website, dikarenakan template VueJS tidak me-render nya sebagaimana adanya, melainkan menjadikannya URL Encode.

Sehingga untuk menampilkannya kita membutuhkan Directives. Apa itu? Directives merupakan attribut spesial dengan awalan -v yang menandakan bahwa ini adalah attribut dari VueJS.

Beberapa directives bisa mengambil “argumen”, dilambangkan dengan titik dua setelah nama directives. Sebagai contoh, directives v-bind digunakan untuk memperbarui atribut HTML secara reaktif:

<a v-bind:href="url"></a>

Disini href adalah sebuah argument, yang menyatakan bahwa v-bind directive untuk mengikat si element punya attributehref diisi dengan propertyurl yang ada di data property.

Diatas merupakan contohnya, sehinggan property url yang kita deklarasikan bisa digunakan. Itu merupakan masih sebagian kecil dari Directives di VueJS kita bisa menggunakannya nanti dengan v-ifv-on, dll. Klo mau lebih detail silahkan liat disini

Okay sekian dulu buat kelanjutan Part 3 VueJS, stay tuned untuk artikel selanjutnya ya!! Thanks!

Bagikan ke temanmu :

Add a Comment

Your email address will not be published. Required fields are marked *