Menampilkan Data pada Vue.js

Silakan untuk mengunjungi website ini dan mencoba:

https://www.w3schools.com/vue/ref_v-html.php

Setelah itu, cobalah menggunakan v-text:

https://www.geeksforgeeks.org/javascript/vue-js-v-text-directive/

Menurut teman-teman, apa yang membedakan antara fungsi mustaches, v-text, dan v-html?

Pada kondisi yang bagaimana menggunakan fungsi-fungsi tersebut?

Setelah menganalisis persamaan dan perbedaan dari fungsi-fungsi menampilkan data pada Vue.js, berikut terdapat best-practice yang dapat dipertimbangkan dalam menggunakan fungsi-fungsi ini:

1. Pastikan menggunakan v-html dengan valid

Saat kita menggunakan directive v-html, kita tidak boleh menambahkan modifier apa pun.

Apa itu modifier?

Modifier dirancang untuk mengubah perilaku directive, yang sering kali berkaitan dengan penanganan peristiwa (misalnya, mencegah tindakan default, dijalankan hanya sekali) atau pengikatan data/data binding (misalnya, trimming input, mengonversi ke angka). Fungsi-fungsi ini tidak relevan dengan tindakan sederhana dalam menyisipkan HTML mentah.

yang berarti Vue template syntax tidak akan diproses oleh v-html

Oleh karena itu, kita harus memiliki argumen dengan ekspresi yang menyimpan kode HTML sebagai string.

Misalnya, kita dapat menulis:

<div v-html="foo"/>

di mana foo adalah variabel.

Security Note:

Merender HTML sembarangan secara dinamis di situs web  bisa sangat berbahaya karena dapat dengan mudah menyebabkan serangan XSS. Gunakan v-html hanya pada konten tepercaya dan jangan pernah pada user-provided content atau user generated content

user-provided content/user generated content:

Konten yang dibuat pengguna, atau dikenal juga sebagai konten yang dibuat pengguna, muncul dari maraknya layanan web yang memungkinkan pengguna suatu sistem untuk membuat konten, seperti gambar, video, audio, teks, testimonial, dan perangkat lunak serta berinteraksi dengan pengguna lain.

2. Menggunakan v-text dengan Benar

v-text setara dengan mustache untuk menginterpolasi ekspresi di dalam suatu elemen.

V-text membutuhkan argumen agar nilai pengembalian ekspresi dapat ditampilkan.

Misalnya, kita dapat menulis:

<span v-text="msg"></span>

Yang sama dengan:

<span>{{msg}}</span>

Referensi:

https://vuejs.org/api/built-in-directives.html

https://medium.com/swlh/vue-best-practices-directives-a57e50e756e8