عزيزي القارئ، في هذا المقال سنتحدث عن كيفية إنشاء تطبيق Vue.js بسيط. سيكون المقال مفصلًا ومفيدًا، وستتضمن الشروحات اللازمة لإنشاء تطبيق Vue.js من البداية. سيتم شرح الأساسيات والتقنيات المستخدمة لإنشاء تطبيق Vue.js. سنستخدم مثالًا عمليًا لإنشاء تطبيق Vue.js بسيط.
مقدمة
Vue.js هو إطار عمل مستند إلى JavaScript يستخدم لإنشاء واجهات المستخدم وتطبيقات الويب ذات الصفحة الواحدة. يستخدم Vue.js تقنيات مثل HTML وCSS و JavaScript لإنشاء واجهات المستخدم الديناميكية. يمكن استخدام Vue.js بسهولة لإنشاء تطبيقات بسيطة أو معقدة.
تحميل Vue.js
لإنشاء تطبيق Vue.js، يجب تحميل Vue.js. يمكنك تنزيل Vue.js من موقع الويب الرسمي. يمكن تنزيل Vue.js من هنا: https://vuejs.org/v2/guide/installation.html
إنشاء تطبيق Vue.js بسيط
بعد تنزيل Vue.js، يمكن البدء في إنشاء التطبيق. يجب إنشاء ملف HTML جديد وإضافة مكتبة Vue.js إليها. يمكن القيام بذلك عن طريق إضافة الرمز التالي إلى ملف HTML:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
في هذا المثال، قمنا بإنشاء ملف HTML جديد وإضافة مكتبة Vue.js إليه. تم إنشاء div بمعرف “app” وتم وضع رسالة بسيطة داخلها.
إنشاء Instance
بعد إضافة مكتبة Vue.js إلى ملف HTML، يجب إنشاء Instance الخاص بتطبيق Vue.js. يمكنك القيام بذلك عن طريق إضافة الرمز التالي إلى ملف HTML:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
في هذا المثال، قمنا بإنشاء Instance جديد باستخدام الدالة العامة Vue() وتم تعيينه إلى متغير يسمى “app”. ثم تم تحديد العنصر الذي يحتوي على التطبيق Vue.js باستخدام الخاصية el والتي تحتوي على معرف العنصر “#app”. ثم تم تعيين الرسالة التي يجب عرضها باستخدام الخاصية data وتم تعيينها إلى “Hello Vue!”.
استخدام تعابير Vue.js
يمكن استخدام تعابير Vue.js لإظهار البيانات في الصفحة بشكل ديناميكي. يمكن القيام بذلك عن طريق إضافة تعبير Vue.js إلى العنصر الذي يحتوي على البيانات. يمكنك القيام بذلك عن طريق تحديث الكود في الملف HTML كما يلي:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>Count: {{ count }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
count: 0
}
})
</script>
</body>
</html>
في هذا المثال، تم إضافة تعبير Vue.js إلى العنصر h1 وتم تعديل قيمة count إلى 0.
استخدام الأحداث في Vue.js
يمكن استخدام الأحداث في Vue.js لتفعيل دوال معينة عند حدوث حدث معين. يمكنك القيام بذلك عن طريق إضافة الكود التالي إلى ملف HTML:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>Count: {{ count }}</p>
<button v-on:click="incrementCount()">Increment</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
count: 0
},
methods: {
incrementCount: function() {
this.count += 1;
}
}
})
</script>
</body>
</html>
```
في هذا المثال، تم إضافة الكود التالي إلى العنصر button: v-on:click=”incrementCount()”. هذا يعني أن Vue.js يتعرف على الحدث “click” ويفعل الدالة “incrementCount()” عند حدوث هذا الحدث. كما يمكنك ملاحظة أن تعريف الدالة تم إضافته في الخاصية methods.
استخدام دورات الحياة في Vue.js
تسمح دورات الحياة في Vue.js للمطورين بتحديد ما يجب القيام به عندما يتم إنشاء أو تحديث عنصر Vue.js. يمكنك استخدام دورة الحياة created() لتنفيذ الكود عند إنشاء Instance الخاص بـ Vue.js. يمكنك القيام بذلك عن طريق إضافة الكود التالي إلى ملف HTML:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>Count: {{ count }}</p>
<button v-on:click="incrementCount()">Increment</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
count: 0
},
methods: {
incrementCount: function() {
this.count += 1;
}
},
created: function() {
console.log('Instance created.');
}
})
</script>
</body>
</html>
في هذا المثال، تم إضافة الكود التالي إلى الخاصية created في Instance الخاص بـ Vue.js: console.log(‘Instance created.’). هذا يعني أن Vue.js سيعرض رسالة في وحدة التحكم عند إنشاء Instance الخاص بـ Vue.js.
استخدام الخواص المحسوبة
يمكن استخدام الخواص المحسوبة في Vue.js لإظهار البيانات المعالجة بشكل ديناميكي. يمكنك إضافة خاصية computed إلى الـ Instance وتعيين دالة إلى هذه الخاصية. سيتم استدعاء هذه الدالة عند تغيير البيانات التي تعتمد عليها. يمكنك القيام بذلك عن طريق إضافة الكود التالي إلى ملف HTML:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>Count: {{ count }}</p>
<p>Count times two: {{ countTimesTwo }}</p>
<button v-on:click="incrementCount()">Increment</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
count: 0
},
methods: {
incrementCount: function() {
this.count += 1;
}
},
computed: {
countTimesTwo: function() {
return this.count * 2;
}
}
})
</script>
</body>
</html>
في هذا المثال، تم إضافة الكود التالي إلى الخاصية computed في Instance الخاص بـ Vue.js: countTimesTwo. هذا يعني أن Vue.js سيضاعف قيمة العداد (count) عند الضرب في 2 ويظهر الناتج في العنصر p.
التحكم في العناصر الفرعية
يمكنك تمرير البيانات إلى العناصر الفرعية من خلال استخدام الخاصية props في الـ Instance الخاص بـ Vue.js. يتم تعريف هذه الخاصية في العنصر الفرعي ويتم استخدامها في الـ Instance الرئيسي. يمكنك القيام بذلك عن طريق إضافة الكود التالي إلى ملف HTML:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<p>Count: {{ count }}</p>
<button v-on:click="incrementCount()">Increment</button>
<custom-component :message="message"></custom-component>
</div>
<script>
Vue.component('custom-component', {
props: ['message'],
template: '<p>{{ message }}</p>'
});
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
count: 0
},
methods: {
incrementCount: function() {
this.count += 1;
}
}
})
</script>
</body>
</html>
في هذا المثال، تم إنشاء عنصر فرعي باستخدام Vue.component وتم تعريف خاصية props وتم إضافتها إلى العنصر الفرعي. ثم تم استخدام العنصر الفرعي في Instance الرئيسي وتم تمرير قيمة message إليها. تم استخدام هذه القيمة في العنصر الفرعي لإظهار الرسالة في العنصر p.
تحميل بيانات من API
يمكنك استخدام Vue.js لتحميل البيانات من API وإظهارها في التطبيق الخاص بك. يمكن القيام بذلك عن طريق استخدام الطريقة المخصصة created في الـ Instance الخاص بـ Vue.js لتحميل البيانات عند تحميل التطبيق. يمكنك استخدام مكتبة axios لإجراء الاتصالات بـ API.
لتحميل البيانات من API، يمكنك القيام بذلك عن طريق إضافة الكود التالي إلى ملف HTML:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<ul>
<li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
posts: []
},
created: function() {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(function(response) {
app.posts = response.data;
})
.catch(function(error) {
console.log(error);
});
}
})
</script>
</body>
</html>
في هذا المثال، تم استخدام مكتبة axios للاتصال بـ API. تم إضافة الكود التالي إلى الخاصية created في الـ Instance الخاص بـ Vue.js لتحميل البيانات عند تحميل التطبيق. تم تعيين القيمة المسترجعة من API إلى الخاصية posts، والتي يتم استخدامها لعرض العناصر في القائمة.
بهذا نكون قد انتهينا من توضيح كيفية إنشاء تطبيق بسيط باستخدام Vue.js. يمكن استخدام Vue.js لإنشاء تطبيقات أكثر تعقيداً ووظائف متعددة، ولكن هذا المثال يوضح الأساسيات اللازمة للبدء في استخدام Vue.js.
الملخص
تم توضيح كيفية إنشاء تطبيق بسيط باستخدام Vue.js. بدأ الأمر بتعريف Instance الرئيسي لـ Vue.js، وتم استخدام الخاصية data لتعريف بيانات التطبيق الأساسية. تم استخدام الخاصية methods لإضافة الوظائف التي تتفاعل مع البيانات المعرفة. ثم تم توضيح كيفية إضافة القوالب لتحديد كيفية عرض البيانات في التطبيق. تم توضيح استخدام الخاصية computed لتعريف بيانات يتم حسابها على أساس البيانات الموجودة بالفعل في التطبيق. تم استخدام الخاصية watch لتحديد التغييرات في البيانات والتفاعل معها. ثم تم توضيح استخدام الخاصية v-if و v-for لتحديد كيفية عرض البيانات بناء على شروط محددة.
تم توضيح استخدام الحدث v-on للتفاعل مع حدث محدد في التطبيق. وأخيرًا، تم توضيح كيفية تحسين أداء التطبيق باستخدام الخاصية v-bind لربط البيانات بصورة ديناميكية مع العناصر في الصفحة.
هذا المثال البسيط يوضح الأساسيات اللازمة للبدء في استخدام Vue.js. يمكن للمستخدمين المبتدئين توسيع هذا المثال لإنشاء تطبيقات أكثر تعقيدًا باستخدام Vue.js.
المصادر:
This article is useful for me
1+ 0 People like this post
