# Sintaksis Templat
Vue.js menggunakan sintaksis templat yang berbasis HTML yang memungkinkan Anda menghubungkan DOM yang di-render dengan data instance komponen secara deklaratif. Semua templat Vue.js merupakan HTML yang valid dan dapat diterjemahkan oleh peramban (browser) dan parser HTML yang sesuai spesifikasi.
Pada dasarnya, Vue mengompilasi templat menjadi fungsi render DOM Virtual. Dikombinasikan dengan sistem reaktivitas, Vue mampu mencari tahu secara cerdas jumlah minimum komponen yang perlu di-render ulang dan menerapkan manipulasi DOM secara minimal ketika state aplikasi berubah.
Jika Anda terbiasa dengan konsep DOM Virtual dan lebih suka menggunakan JavaScript, Anda juga dapat menulis fungsi render secara langsung sebagai pengganti templat, dengan pilihan dukungan JSX juga.
# Interpolasi
# Teks
Bentuk paling mendasar dari binding data adalah interpolasi teks menggunakan sintaksis "Mustache" (kurung kurawal ganda):
<span>Pesan: {{ msg }}</span>
Tag mustache akan diganti dengan nilai properti msg yang berasal dari instance komponen yang sesuai. Nilai tag mustache juga akan dimutakhirkan kapanpun nilai properti msg berubah.
Anda juga dapat melakukan interpolasi syang hanya dijalankan sekali. Dan tidak akan dimutakhirkan ketika terjadi perubahan data menggunakan direktif v-once, tetapi perlu diingat cara ini juga berdampak pada binding lain pada node yang sama.
<span v-once>Msg tidak akan berubah jika nilai variabelnya berubah: {{ msg }}</span>
# HTML Raw
Tanda mustaches menerjemahkan data sebagai teks biasa, bukan sebagai HTML. Untuk menampilkan HTML sebenarnya, Anda perlu menggunakan direktif v-html:
<p>Menggunakan tanda <em>mustaches</em>: {{ rawHtml }}</p>
<p>Menggunakan direktif v-html: <span v-html="rawHtml"></span></p>
2
See the Pen Merender v-html by Vue (@Vue) on CodePen.
Konten dari span akan diganti dengan nilai properti rawHtml, diterjemahkan sebagai HTML biasa - binding data diabaikan. Perlu diingat bahwa Anda tidak dapat menggunakan v-html untuk membuat sebagian templat, karena Vue bukanlah mesin templating berbasis string. Sebaliknya, komponen dianggap sebagai unit dasar dari antar muka pengguna (UI) untuk dapat digunakan kembali dan dikomposisi.
TIP
Me-render HTML yang berubah-ubah secara dinamis pada situs Anda sangat berbahaya karena hal tersebut dapat memicu kerentanan XSS (opens new window). Hanya gunakan interpolasi HTML pada konten terpecaya dan jangan pernah pada konten yang disediakan oleh pengguna.
# Atribut
Tanda mustache tidak dapat digunakan di dalam atribut HTML. Sebagai gantinya, gunakan direktif v-bind:
<div v-bind:id="dynamicId"></div>
Jika nilai yang terhubung berupa null atau undefined, maka atribut tidak akan disertakan pada elemen yang di-render.
Pada kasus atribut bernilai boolean, dimana keberadaan nilainya berupa true, v-bind bekerja sedikit berbeda. Sebagai contoh:
<button v-bind:disabled="isButtonDisabled">Tombol</button>
Atribut disabled akan disertakan jika isButtonDisabled memiliki nilai truthy. Atribut tersebut juga akan disertakan jika nilai nya string kosong, menjaga kekonsistesian dengan <button disabled="">. Untuk nilai falsy lainnya, atribut tersebut akan dihilangkan.
# Menggunakan Ekspresi JavaScript
Sejauh ini kita hanya melakukan binding ke properti sederhana di templat. Tetapi Vue.js sebenarnya juga mendukung fitur penuh ekspresi JavaScript di dalam semua binding data:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
2
3
4
5
6
7
Ekspresi akan dijalankan sebagai JavaScript pada cakupan instance aktif sekarang. Batasannya adalah setiap binding hanya boleh berisi satu jenis ekspresi, sehingga contoh berikut tidak akan bekerja:
<!-- contoh kode berikut merupakan pernyataan, bukan ekspresi: -->
{{ var a = 1 }}
<!-- alur kontrol tidak akan bekerja juga, gunakan ekspresi ternary -->
{{ if (ok) { return message } }}
2
3
4
5
# Direktif
Direktif adalah atribut spesial dengan awalan v-. Nilai atribut direktif diharapkan menjadi suatu ekspresi JavaScript (dengan pengecualian untuk v-for dan v-on, yang akan didiskusikan nanti). Tugas direktif adalah menerapkan efek samping (side effect) secara reaktif ke DOM ketika nilai dari ekspresi berubah. Mari kita lihat contoh yang terdapat pada bagian perkenalan:
<p v-if="seen">Sekarang Anda melihatku</p>
Pada contoh tersebut, direktif v-if akan menghapus/memasukkan elemen <p> berdasarkan kebenaran nilai ekspresi seen.
# Argumen
Beberapa direktif dapat menerima sebuah "argumen", ditulis sebagai titik dua setelah nama direktif. Sebagai contoh, direktif v-bind digunakan untuk memutakhirkan atribut HTML secara reaktif:
<a v-bind:href="url"> ... </a>
Pada contoh tersebut, href adalah argumen, yang memberitahukan direktif v-bind untuk melakukan binding atribut elemen href ke nilai ekspresi url.
Contoh lain adalah direktif v-on, yang akan menambahkan listener ke event DOM:
<a v-on:click="doSomething"> ... </a>
Pada contoh tersebut, argumen adalah nama event yang di-listen. Kita juga akan membahas mengenai penanganan event lebih dalam.
# Argumen Dinamis
Memungkinkan juga untuk menggunakan ekspresi JavaScript pada argumen direktif dengan cara membungkusnya dengan kurung siku:
<!--
Mohon diingat bahwa ada beberapa batasan untuk ekspresi argumen, seperti yang dijelaskan
pada bagian "Batasan Ekspresi Argumen Dinamis" di bawah ini.
-->
<a v-bind:[attributeName]="url"> ... </a>
2
3
4
5
Pada contoh tersebut, attributeName akan diterjemahkan sebagai ekspresi JavaScript, dan nilai terjemahannya akan digunakan sebagai nilai final untuk argumen. Sebagai contoh, jika instance komponen Anda memiliki properti data, attributeName, yang memiliki nilai "href", maka binding ini akan sama seperti v-bind:href.
Demikian pula, jika Anda menggunakan argumen dinamis untuk melakukan binding penanganan untuk nama event dinamis:
<a v-on:[eventName]="doSomething"> ... </a>
Pada contoh tersebut, ketika eventName bernilai "focus", maka v-on:[eventName] akan sama seperti v-on:focus.
# Modifier
Modifier adalah akhiran spesial ditulis sebagai titik setelah nama argumen direktif. Modifier menunjukkan sebuah direktif harus dihubungkan dengan cara tertentu. Sebagai contoh modifier .prevent memberitahu direktif v-on untuk memanggil event.preventDefault() pada event yang terpicu:
<form v-on:submit.prevent="onSubmit">...</form>
Anda akan melihat contoh modifier lain nantinya, untuk v-on dan untuk v-model, ketika kita menjelajahi fitur-fitur tersebut.
# Singkatan
Awalan v- berfungsi sebagai isyarat visual untuk mengidentifikasi atribut sepesifik Vue pada templat Anda. Cara tersebut berguna ketika Anda menggunakan Vue.js untuk menerapkan perilaku dinamis pada markah yang ada, tetapi dapat terasa bertele-tele untuk beberapa direktif yang sering digunakan. Pada saat yang sama, kebutuhan untuk awalan v- menjadi tidak terlalu penting ketika Anda membangun SPA (opens new window), dimana Vue mengatur setiap templat. Sehingga, Vue menyediakan singkatan spesial untuk dua direktif yang paling sering digunakan, v-bind dan v-on:
# Singkatan v-bind
<!-- sintaksis penuh -->
<a v-bind:href="url"> ... </a>
<!-- singkatan -->
<a :href="url"> ... </a>
<!-- singkatan dengan argumen dinamis -->
<a :[key]="url"> ... </a>
2
3
4
5
6
7
8
# Singkatan v-on
<!-- sintaksis penuh -->
<a v-on:click="doSomething"> ... </a>
<!-- singkatan -->
<a @click="doSomething"> ... </a>
<!-- singkatan dengan argumen dinamis -->
<a @[event]="doSomething"> ... </a>
2
3
4
5
6
7
8
Cara tersebut mungkin terlihat berbeda dari HTML pada umumnya, tetapi : dan @ adalah karakter valid untuk nama atribut dan peramban yang didukung oleh Vue dapat menerjemahkannya secara benar. Selain itu, mereka tidak akan muncul pada markah final yang ter-render. Sintaksis singkatan sangat opsional, tetapi Anda akan mengapresiasinya ketika Anda mempelajari mengenai penggunaannya nanti.
Dari halaman selanjutnya hingga seterusnya, kita akan menggunakan singkatan pada contoh kita, karena hal tersebut merupakan penggunaan yang paling umum untuk pengembang Vue.
# Peringatan
# Batasan Nilai Argumen Dinamis
Argumen dinamis diharapkan diterjemahkan sebagai string, dengan pengecualian nilai null. Nilai spesial null dapat digunakan untuk menghilangkan binding secara jelas. Nilai bukan string lainnya akan memicu peringatan.
# Batasan Ekspresi Argumen Dinamis
Ekspresi argumen dinamis memiliki batasan sintaksi karena karakter tertentu, seperti spasi dan tanda kutip, tidak valid di dalam nama atribut HTML. Sebagai contoh, contoh kode berikut tidaklah valid:
<!-- Contoh kode berikut akan memicu peringatan kompilator. -->
<a v-bind:['foo' + bar]="value"> ... </a>
2
Kita merekomendasikan mengganti ekspresi kompleks apapun dengan properti computed, salah satu dasar Vue, yang akan kita bahas dalam waktu dekat.
Ketika menggunakan templat di dalam DOM (templat yang secara langsung ditulis pada berkas HTML), Anda juga harus menghindari penamaan kunci dengan karakter huruf besar, karena peramban (browser) akan memaksa nama atribut menjadi huruf kecil:
<!--
Contoh kode berikut akan diubah menjadi v-bind:[someattr] pada templat di dalam DOM.
Kecuali jika Anda memiliki properti "someattr" pada _instance_ Anda, kode Anda tidak akan bekerja.
-->
<a v-bind:[someAttr]="value"> ... </a>
2
3
4
5
# Ekspresi JavaScript
Ekspresi templat dijalankan di dalam bak pasir dan hanya dapat mengakses pada daftar putih global (opens new window) seperti Math dan Date. Anda tidak boleh mencoba mengakses global yang didefinisikan oleh pengembang sendiri pada ekspresi templat.