-
في قسم الـ data كما وضحنا في الدرس السابق يمكن ان نضيف البيانات والمتغيرات لاستخدامها في الـ HTML
لو أردنا أن نكتب على سبيل المثال اسم مركب على شكل متغيرات مع العمر على الشكل التالي:
<div id="app">
<h1>{{first_name}} {{last_name}}</h1>
<p>العمر: {{age}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: "#app",
data: {
first_name: "sohep",
last_name: "alslamat",
age: 30
}
})
</script>
كما تلاحظوا أنه يمكن ان نمرر أي نوع من البيانات في الـ data فهنا مررنا الاسم كنص والعمر كرقم
-
إذا كنا نستخدم django أو لارفيل في الbackEnd فإن القوسين الكبيرين {{}} يسببان تضارب في الـ HTML كيف نقوم بحل هذا المشكلة في Vue js ؟
الحل موجود لدى vue js حيث يمكنك ان تستخدم خاصية v-text لعرض المتغيرات على HTML في حال التضارب على الشكل التالي:
<div id="app">
<h1 v-text="name"></h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: "#app",
data: {
name: "sohep"
}
})
</script>
تجدون التفاصيل في المقطع:
