ما هو Vue.js؟
يتيح لك Vue.js توسيع HTML باستخدام سمات HTML تسمى التوجيهات
توفر توجيهات Vue.js وظائف لتطبيقات HTML
يوفر Vue.js توجيهات مضمنة وتوجيهات يحددها المستخدم
توجيهات Vue.js
يستخدم Vue.js الأقواس المزدوجة كحوامل نائبة {{ }}للبيانات.
توجيهات Vue.js هي سمات HTML مع البادئة v-
عرض المثال
في المثال أدناه ، يتم إنشاء كائن Vue جديد باستخدام Vue () جديد .
تقوم الخاصية el: بربط كائن Vue الجديد بعنصر HTML بالمعرف = "app" .
مثال
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js ملزم
عندما يكون كائن Vue مرتبطًا بعنصر HTML ، سيتغير عنصر HTML عندما يتغير كائن Vue:
مثال
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
التجليد ثنائي الاتجاه Vue.js
يربط v-modelالتوجيه قيمة عناصر HTML ببيانات التطبيق.
يسمى هذا الربط ثنائي الاتجاه:
مثال
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
ربط حلقة Vue.js
استخدام v-forالتوجيه لربط مصفوفة من كائنات Vue بـ "مصفوفة" من عنصر HTML:
مثال
<div id="app">
<ul>
<li v-for="x in todos">
{{
x.text }}
</li>
</ul>
</div>
<script>
myObject =
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn
JavaScript' },
{ text: 'Learn
Vue.js' },
{ text: 'Build
Something Awesome' }
]
}
})
</script>