مضامین

سنگل پیج ایپلی کیشن کیا ہے اور Vue.js کیا ہے۔

Vue.js ایک ترقی پسند اور اوپن سورس JavaScript فریم ورک ہے جو انٹرایکٹو ویب یوزر انٹرفیس اور سنگل پیج ایپلی کیشنز کو تیار کرنے کے لیے استعمال کیا جاتا ہے۔

Vue.js بنیادی طور پر ایپلیکیشن کے ویژولائزیشن حصے پر توجہ مرکوز کرتا ہے، جسے فرنٹ اینڈ ڈیولپمنٹ بھی کہا جاتا ہے۔ Vue.js دن بہ دن مقبول ہو رہا ہے کیونکہ اسے دوسرے پروجیکٹس اور لائبریریوں کے ساتھ ضم کرنا بہت آسان ہے۔ اسے انسٹال کرنا اور استعمال کرنا بہت آسان ہے۔

Vue.js کیا ہے؟

Vue.js ایک ترقی پسند JavaScript فریم ورک ہے۔ اوپن سورس انٹرایکٹو ویب یوزر انٹرفیس اور سنگل پیج ایپلی کیشنز (SPAs) تیار کرنے کے لیے استعمال کیا جاتا ہے۔ Vue.js کو عام طور پر Vue کہا جاتا ہے اور اسے "view.js" یا "view" کہا جاتا ہے۔

سنگل پیج ایپلیکیشن (SPA) کیا ہے؟

سنگل پیج ایپلیکیشن یا ایس پی اے ایک ویب ایپلیکیشن یا ویب سائٹ ہے جو صارفین کو ڈیسک ٹاپ ایپلی کیشن کی طرح بہت ہموار، جوابدہ اور تیز تجربہ فراہم کرتی ہے۔ ایک صفحے کی ایپلی کیشن میں ایک صفحے پر ایک مینو، بٹن اور بلاکس ہوتے ہیں۔ جب کوئی صارف ان میں سے کسی ایک پر کلک کرتا ہے، تو یہ سرور سے پورے نئے صفحات لوڈ کرنے کے بجائے متحرک طور پر موجودہ صفحہ کو دوبارہ لکھتا ہے۔ اس کی جوابی رفتار کے پیچھے یہی وجہ ہے۔

Vue بنیادی طور پر فرنٹ اینڈ ڈویلپمنٹ کے لیے بنایا گیا ہے، اس لیے اسے بہت سی ایچ ٹی ایم ایل، جاوا اسکرپٹ اور سی ایس ایس فائلوں کو ہینڈل کرنا پڑتا ہے۔ Vue.js صارفین کے لیے HTML کو HTML کے انتساب کے ساتھ بڑھانا آسان بناتا ہے جسے ڈائریکٹیو کہتے ہیں۔ Vue.js بلٹ ان ہدایات اور بہت سی ہدایات فراہم کرتا ہے۔ defiHTML ایپلی کیشنز کی فعالیت کو بہتر بنانے کے لیے صارف کی طرف سے نائٹ۔

Vue.js کی خصوصیات

ذیل میں Vue.js کی سب سے اہم خصوصیات کی فہرست ہے:

توازن

Vue.js اجزاء اس فریم ورک کی اہم خصوصیات میں سے ایک ہیں۔ ان کا استعمال بنیادی HTML عناصر کو بڑھانے کے لیے کیا جاتا ہے تاکہ دوبارہ قابل استعمال کوڈ کو شامل کیا جا سکے۔ آپ Vue.js ایپلی کیشنز میں دوبارہ قابل استعمال حسب ضرورت عناصر بنا سکتے ہیں جنہیں بعد میں HTML میں دوبارہ استعمال کیا جا سکتا ہے۔

سانچے

Vue.js HTML پر مبنی ٹیمپلیٹس فراہم کرتا ہے جو پیش کردہ DOM کو Vue مثال کے ڈیٹا کے ساتھ منسلک کرنے کے لیے استعمال کیا جا سکتا ہے۔ تمام Vue ٹیمپلیٹس درست HTML ہیں جن کی وضاحت کے مطابق براؤزرز اور HTML تجزیہ کاروں کے ذریعے تجزیہ کیا جا سکتا ہے۔ Vue.js ماڈلز کو ورچوئل DOM رینڈرنگ فنکشنز میں مرتب کرتا ہے۔ Vue براؤزر کو ریفریش کرنے سے پہلے اجزاء کو ورچوئل DOM میموری میں پیش کرتا ہے۔ Vue دوبارہ رینڈر کرنے کے لیے اجزاء کی کم از کم تعداد کا بھی حساب لگا سکتا ہے اور درخواست کی حالت کو تبدیل کرتے وقت DOM ہیرا پھیری کی کم از کم مقدار کا اطلاق کر سکتا ہے۔

Reattivita

Vue ایک جوابی نظام فراہم کرتا ہے جو سادہ JavaScript اشیاء کو استعمال کرتا ہے اور دوبارہ رینڈرنگ کو بہتر بناتا ہے۔ اس عمل میں، ہر ایک جزو اپنے رد عمل کے انحصار پر نظر رکھتا ہے، اس لیے سسٹم کو بخوبی معلوم ہوتا ہے کہ کب اور کن اجزاء کو دوبارہ پیش کرنا ہے۔

روٹنگ

پیج نیویگیشن vue-router کی مدد سے کی جاتی ہے۔ آپ اپنی سنگل پیج ایپلیکیشن کے لیے باضابطہ طور پر تعاون یافتہ vue-router لائبریری استعمال کر سکتے ہیں۔

منتقلی

Vue آپ کو مختلف منتقلی اثرات استعمال کرنے کی اجازت دیتا ہے جب عناصر کو DOM سے داخل، اپ ڈیٹ یا ہٹا دیا جاتا ہے۔

Vue.js کو کیسے انسٹال کیا جائے؟

Vue.js استعمال کرنے کے کئی طریقے ہیں۔ آپ اسے اس کی آفیشل سائٹ پر جا کر انسٹال کر سکتے ہیں یا آپ CDN لائبریری سے بھی Vue.js فائل کا استعمال شروع کر سکتے ہیں۔ اپنے پروجیکٹ میں Vue.js استعمال کرنے کے کچھ طریقے یہ ہیں۔

براہ راست HTML فائل میں

اگر آپ ٹیگ استعمال کرنا چاہتے ہیں۔ <script> Vue.js کے براہ راست آپ کی HTML فائل میں، آپ کو اسے سرکاری ویب سائٹ سے ڈاؤن لوڈ کرنے کی ضرورت ہے۔

<html>  
   <head>  
      <script type = "text/javascript" src = "vue.min.js"></script>  
   </head>  
   <body>
   </body>  
</html>  

آئیے Vue.js آفیشل ویب سائٹ پر جائیں۔ https://vuejs.org/v2/guide/installation.html اپنی ضروریات کے مطابق vue.js ڈاؤن لوڈ کرنے کے لیے۔

CDN استعمال کرنا

آپ اپنی درخواست میں CDN سے Vue.js فائل بھی استعمال کر سکتے ہیں۔ عنصر کے اندر لنک https://unpkg.com/vue@3/dist/vue.global.js استعمال کریں <script>، جیسا کہ ذیل میں:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Vue.js استعمال کرنے کے فوائد

Vue.js جدید ترین سافٹ ویئر ٹیکنالوجیز میں سے ایک ہے جو وسیع پیمانے پر ویب ڈویلپمنٹ اور سنگل پیج ایپلی کیشنز (SPA) کی تعمیر کے لیے استعمال ہوتی ہے۔ جیسا کہ آپ نام سے اندازہ لگا سکتے ہیں، یہ زیادہ تر UI یا پروجیکٹ کے ڈسپلے سائیڈ کے لیے استعمال ہوتا ہے۔

آئیے اپنے پروجیکٹ میں Vue.js استعمال کرنے کے فوائد دیکھتے ہیں:

بہت چھوٹا سائز

Vue.js کا سب سے بڑا فائدہ یہ ہے کہ یہ سائز میں بہت چھوٹا ہے۔ JavaScript کے فریم ورک کی کامیابی کا بہت زیادہ انحصار اس کے سائز پر ہوتا ہے اور یہ دلچسپ JavaScript پلگ ان صرف 18-21KB ہے، اس لیے آپ اسے بہت آسانی سے ڈاؤن لوڈ اور استعمال کر سکتے ہیں۔

انوویشن نیوز لیٹر
جدت پر سب سے اہم خبروں کو مت چھوڑیں۔ ای میل کے ذریعے انہیں وصول کرنے کے لیے سائن اپ کریں۔
سمجھنے میں آسان اور کوڈ

Vue.js فریم ورک کا ڈھانچہ بہت آسان ہے اور اسے سمجھنا بہت آسان ہے۔ یہ اس فریم ورک کی مقبولیت کی ایک وجہ ہے۔ اگر آپ HTML اور JavaScript سے واقف ہیں تو آپ آسانی سے Vue.js میں کوڈ کر سکتے ہیں۔ صارفین آسانی سے Vue.js کو اس کی سادہ ساخت کی وجہ سے اپنے ویب پروجیکٹ میں شامل کر سکتے ہیں اور ایپلی کیشنز تیار کر سکتے ہیں۔

موجودہ ایپلی کیشنز کے ساتھ سادہ انضمام

Vue.js میں ہر چیز کے لیے بہت سے اجزاء ہوتے ہیں اور موجودہ ایپلی کیشنز کے ساتھ بہت تیزی سے مربوط ہو سکتے ہیں۔ آپ اسے جاوا اسکرپٹ میں لکھی ہوئی کسی بھی ایپلیکیشن کے ساتھ ضم کر سکتے ہیں۔

فطرت کی طرف سے لچکدار

Vue.js کی لچکدار نوعیت React.js، Angular.js، اور کسی دوسرے نئے JavaScript فریم ورک کے ڈویلپرز کو سمجھنا بھی آسان بناتی ہے۔ یہ HTML فائلوں، JavaScript فائلوں اور خالص JavaScript فائلوں کو لکھنے کے لیے ورچوئل نوڈس استعمال کرنے کے لیے بہت زیادہ لچک فراہم کرتا ہے۔

توازن

آپ اپنی مرضی کے عناصر بنا سکتے ہیں جو Vue.js ایپلی کیشنز میں دوبارہ قابل استعمال ہیں۔

سادہ، مکمل اور تفصیلی دستاویزات

Vue.js بہت آسان، مکمل اور تفصیلی دستاویزات فراہم کرتا ہے، اس لیے جن ڈویلپرز کو ایچ ٹی ایم ایل اور جاوا اسکرپٹ کے بارے میں بہت کم اندازہ ہے وہ اسے پروگرام کے لیے استعمال کر سکتے ہیں۔

ورچوئل DOM

Vue.js دوسرے موجودہ فریم ورک جیسے ReactJS، Ember، وغیرہ کی طرح ورچوئل DOM کا استعمال کرتا ہے۔ ورچوئل DOM اصل HTML DOM کا ایک ہلکا پھلکا ان-میموری ٹری ہے اور ابتدائی DOM کو متاثر کیے بغیر اپ ڈیٹ کیا جاتا ہے۔

دو طرفہ مواصلات

Vue.js اپنے ماڈل ویو ویو ماڈل (MVVM) فن تعمیر کے ساتھ دو طرفہ مواصلت فراہم کرتا ہے جو HTML بلاکس کی ہینڈلنگ کو آسان بناتا ہے۔

Vue.js اعلانیہ رینڈرنگ

فریم ورک ایک ایسے نظام کے ساتھ آتا ہے جو ہمیں سادہ اور سیدھے ماڈل نحو کا استعمال کرتے ہوئے DOM کو ڈیٹا کو اعلانیہ طور پر پیش کرنے کی اجازت دیتا ہے۔

یہاں ایک مثال ہے:

<body>
<div id="app">  
  {{ message }}  
</div>

<script>
var app = new Vue({  
  el: '#app',  
  data: {  
    message: 'This is a simple Vue.js Declarative Rendering example!'  
  }  
})  
</script>
</body>

Vue.js فریم ورک ہمیں اجازت دیتا ہے۔ definire HTML اوصاف جنہیں ڈائریکٹیو کہتے ہیں، جو HTML ایپلی کیشنز کو فعالیت فراہم کرنے کے لیے استعمال ہوتے ہیں۔

Vue.js میں دو قسم کی ہدایتیں ہیں:

  • مربوط ہدایات e
  • ہدایت کرنے والا defiصارف کی طرف سے nited.

Vue.js ڈیٹا کے لیے پلیس ہولڈرز کے طور پر دوہرے منحنی خطوط وحدانی {{}} کا استعمال کرتا ہے، اور Vue.js ہدایات HTML صفات ہیں جو v- سابقہ ​​استعمال کرتی ہیں۔

ایک Vue ایپ ایک واحد DOM عنصر سے منسلک ہوتی ہے اور اسے مکمل طور پر کنٹرول کرتی ہے۔ مندرجہ بالا مثال میں، یہ #app ہے۔

Vue کے ساتھ ہم HTML کو انٹری پوائنٹ کے طور پر غور کر سکتے ہیں، اور باقی سب کچھ Vue مثال کے اندر ہوتا ہے۔
آئیے ایک مثال دیکھتے ہیں جہاں ہم عنصر اور انتساب بائنڈنگ کی کوشش کرتے ہیں:

<html>  
    <head>  
        <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>         
        <div id="app-2">  
        <span v-bind:title="message">  
            Hover mouse over me for a few seconds  
            and see a dynamically bound title which I have set!  
        </span>  
        </div>          
        <script>
           var app2 = new Vue({  
           el: '#app-2',  
           data: {  
           message: 'You loaded this page on ' + new Date().toLocaleString()  
                 }  
           })  
       </script>  
    </body>  
</html>  

اس صورت میں، نیا v-bind وصف ہدایت ہے۔ ہدایات کو v- سابقہ ​​کے ساتھ اس بات کی نشاندہی کرنے کے لیے استعمال کیا جاتا ہے کہ وہ Vue کی طرف سے فراہم کردہ منفرد صفات ہیں، اور پیش کردہ DOM پر خصوصی جوابی رویے کو لاگو کرنے کے لیے استعمال کیے جاتے ہیں۔

مثال کا نتیجہ درج ذیل ہے۔

Ercole Palmeri

انوویشن نیوز لیٹر
جدت پر سب سے اہم خبروں کو مت چھوڑیں۔ ای میل کے ذریعے انہیں وصول کرنے کے لیے سائن اپ کریں۔

حالیہ مضامین

Veeam ransomware کے لیے تحفظ سے لے کر ردعمل اور بازیابی تک سب سے زیادہ جامع تعاون فراہم کرتا ہے۔

Veeam کی طرف سے Coveware سائبر بھتہ خوری کے واقعات کے ردعمل کی خدمات فراہم کرتا رہے گا۔ Coveware فرانزک اور تدارک کی صلاحیتیں پیش کرے گا…

اپریل 23 2024

سبز اور ڈیجیٹل انقلاب: کس طرح پیشین گوئی کی دیکھ بھال تیل اور گیس کی صنعت کو تبدیل کر رہی ہے

پیشن گوئی کی دیکھ بھال تیل اور گیس کے شعبے میں انقلاب برپا کر رہی ہے، پلانٹ کے انتظام کے لیے ایک جدید اور فعال نقطہ نظر کے ساتھ۔

اپریل 22 2024

UK کے عدم اعتماد کے ریگولیٹر نے GenAI پر BigTech کا الارم بڑھا دیا۔

UK CMA نے مصنوعی ذہانت کے بازار میں بگ ٹیک کے رویے کے بارے میں ایک انتباہ جاری کیا ہے۔ وہاں…

اپریل 18 2024

کاسا گرین: اٹلی میں پائیدار مستقبل کے لیے توانائی کا انقلاب

عمارتوں کی توانائی کی کارکردگی کو بڑھانے کے لیے یورپی یونین کی طرف سے تیار کردہ "گرین ہاؤسز" فرمان نے اپنے قانون سازی کے عمل کو اس کے ساتھ ختم کیا ہے…

اپریل 18 2024

اپنی زبان میں انوویشن پڑھیں

انوویشن نیوز لیٹر
جدت پر سب سے اہم خبروں کو مت چھوڑیں۔ ای میل کے ذریعے انہیں وصول کرنے کے لیے سائن اپ کریں۔

ہمارے ساتھ چلیے