Сүүлийн жилүүдэд javascript фреймворкийн хөгжлийн дүнд хэрэглэгч талын хуудасны боловсруулалт эрчимтэй сайжран хөгжсөн. Хэрэглэгч талын хуудасыг боловсруулах сайн хэрэгслүүдийн нэгээр Vue фреймворк зүй ёсорр тооцогдоно. Сайтад Vue фреймворкийн хичээлүүдийг нийтэлж байгаа бөгөөд энэ удаад Vue -гээс хуудасны шаблонд Html кодыг үзүүлэх аргын авч үзье. Үүнийг интерполяц буюу давхар хаалт бүтцээр
<body>
<div id="app">
<h2>
{{ link }}
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
link: '<a href="https:">E-surgalt</a>'
}
})
</script>
</body>гаргах гээд үзье. Хуудсаа хөтөч дээр нээвэл
бидний тооцож байснаас өөр үр дүнг үзүүлнэ. Хөтөч link -д тодорхойлон өгсөн мөрийг хуудаст холбоос байдлаар биш зүгээр л Html кодыг агуулсан мөр хэлбэрээр үзүүлсэн. Vue тохиргооны обьектод тодорхойлогдсон Html кодыг хуудаст зөв хэлбэрээр боловсруулахад v-html директивийг
<body>
<div id="app">
<h2 v-html="link"></h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
link: '<a href="https:">E-surgalt</a>'
}
})
</script>
</body>хуудасны шаблоны тегд дээрх байдлаар ашиглана. Кодод h2 тегд v-html директивийг заагаад түүний утгаар Html кодыг агуулан буй хувьсагчийг өгсөн. Ингэснээр v-html директив link хувьсагчийн утгыг h2 тегд холбон өгснөөр Vue тухайн хувьсагчийн агуулгыг компиляц хийн шаблонд оруулна гэдгийг мэднэ. Одоо хуудсыг шинэчилбэл
link -д тодорхойлсон Html холбоосыг хуудаст зөв байдлаар үзүүлэх бөгөөд холбоос дээр дарвал E-surgalt сайтад шилжилт хийгдэнэ. v-html директив бэлэн тодорхойлогдсон Html кодыг хуудаст үзүүлэх үүрэгтэй ч түүнийг ашиглахдаа маш нямбай хандах ёстойг анхааруулъя. Жишээ нь та серверээс ямар нэгэн бэлэн html кодыг аван хуудаст v-html директивийг ашиглан харуулдаг байлаа гэхэд хорлогчид үүнийг ашиглан хуудаст хортой кодыг оруулан ирж мэднэ. Хэдийгээр Vue фреймворк v-html директивт тодорхой хэмжээний хамгаалалтыг оруулсан байдаг ч түүнийг ашиглахдаа маш нямбай хандахыг зөвлөе. Иймээс v-html директивийг програмдаа ашиглахын оронд Vue фреймворкийн өөр боломжуудыг түлхүү ашиглах нь илүү. Гэхдээ Vue фреймворкт Html кодыг хуудаст оруулан ирэх боломж байдгийг мэдэж байх хэрэгтэй.
