Vue.js خاص طور تي ايپليڪيشن جي بصري حصي تي ڌيان ڏئي ٿو، جنهن کي فرنٽ-اينڊ ڊولپمينٽ پڻ سڏيو ويندو آهي. Vue.js ڏينهون ڏينهن مشهور ٿي رهيو آهي ڇاڪاڻ ته اهو ٻين منصوبن ۽ لائبريرين سان ضم ڪرڻ تمام آسان آهي. اهو انسٽال ڪرڻ ۽ استعمال ڪرڻ بلڪل سادو آهي.
Vue.js هڪ ترقي پسند JavaScript فريم ورڪ آهي کليل ذريعو انٽرايڪٽو ويب يوزر انٽرفيس ۽ سنگل پيج ايپليڪيشنز (SPAs) کي ترقي ڪرڻ لاءِ استعمال ڪيو ويو. Vue.js عام طور تي Vue جي طور تي حوالو ڏنو ويو آهي ۽ "view.js" يا "view".
هڪ سنگل پيج ايپليڪيشن يا SPA هڪ ويب ايپليڪيشن يا ويب سائيٽ آهي جيڪا صارفين کي هڪ ڊيسڪ ٽاپ ايپليڪيشن وانگر تمام آسان، جوابي ۽ تيز تجربو مهيا ڪري ٿي. ھڪڙي صفحي جي ايپليڪيشن ۾ ھڪڙي صفحي تي ھڪڙو مينيو، بٽڻ ۽ بلاڪ شامل آھن. جڏهن هڪ صارف انهن مان هڪ تي ڪلڪ ڪري ٿو، اهو متحرڪ طور تي موجوده صفحي کي ٻيهر لکندو آهي بلڪه سرور مان مڪمل نوان صفحا لوڊ ڪرڻ جي. اهو ان جي جوابي رفتار جي پويان سبب آهي.
Vue بنيادي طور تي فرنٽ اينڊ ڊولپمينٽ لاءِ ٺاهيو ويو آهي، تنهنڪري ان کي تمام گهڻيون HTML، JavaScript ۽ CSS فائلون سنڀالڻ گهرجن. Vue.js استعمال ڪندڙن لاءِ HTML کي وڌائڻ لاءِ آسان بڻائي ٿو HTML خاصيتن سان جنهن کي هدايتون سڏيو وڃي ٿو. Vue.js ٺاهيل هدايتون ۽ ڪيتريون ئي هدايتون مهيا ڪري ٿي defiHTML ايپليڪيشنن جي ڪارڪردگي کي بهتر ڪرڻ لاءِ استعمال ڪندڙ طرفان نائيٽ.
هيٺ ڏنل فهرست آهي Vue.js جي سڀ کان اهم خاصيتن جي:
Vue.js اجزاء هن فريم ورڪ جي اهم خاصيتن مان هڪ آهن. اهي استعمال ڪيا ويندا آهن بنيادي HTML عناصر کي وڌائڻ لاءِ ٻيهر قابل استعمال ڪوڊ کي ختم ڪرڻ لاءِ. توهان Vue.js ايپليڪيشنن ۾ ٻيهر استعمال لائق ڪسٽم عناصر ٺاهي سگهو ٿا جيڪي بعد ۾ HTML ۾ ٻيهر استعمال ڪري سگھجن ٿيون.
Vue.js مهيا ڪري ٿو HTML تي ٻڌل ٽيمپليٽس جيڪي استعمال ڪري سگھجن ٿيون DOM کي Vue مثال جي ڊيٽا سان ڳنڍڻ لاءِ. سڀئي Vue ٽيمپليٽس صحيح HTML آهن جيڪي مخصوص-مطابقت رکندڙ برائوزرن ۽ HTML تجزين ذريعي تجزيي ڪري سگهجن ٿيون. Vue.js ماڊلز کي ورچوئل DOM رينڊنگ جي ڪمن ۾ گڏ ڪري ٿو. Vue برائوزر کي ريفريش ڪرڻ کان اڳ اجزاء کي ورچوئل DOM ياداشت ۾ پيش ڪري ٿو. Vue پڻ حساب ڪري سگھي ٿو اجزاء جو گھٽ ۾ گھٽ تعداد ٻيهر رينڊر ڪرڻ ۽ لاڳو ڪرڻ لاءِ گھٽ ۾ گھٽ مقدار جي ڊي او ايم مينيپوليشن کي جڏهن ايپليڪيشن اسٽيٽ تبديل ڪندي.
Vue هڪ جوابي نظام فراهم ڪري ٿو جيڪو استعمال ڪري ٿو سادو JavaScript شيون ۽ بهتر ڪري ٿو ٻيهر رينڊرنگ. ھن عمل ۾، ھر جزو پنھنجي رد عمل جي انحصار جي نگراني ڪندو آھي، تنھنڪري سسٽم کي چڱيءَ طرح معلوم ٿئي ٿو ته ڪھڙا جزا وري رينجر ڪرڻا آھن.
صفحي جي نيويگيشن vue-router جي مدد سان ڪئي ويندي آهي. توھان استعمال ڪري سگھوٿا سرڪاري طور تي سپورٽ ٿيل vue-router لائبريري پنھنجي ھڪڙي صفحي جي ايپليڪيشن لاءِ.
Vue توهان کي مختلف منتقلي اثرات استعمال ڪرڻ جي اجازت ڏئي ٿي جڏهن عناصر داخل ڪيا وڃن، تازه ڪاري يا ڊوم مان هٽايو وڃي.
Vue.js استعمال ڪرڻ جا ڪيترائي طريقا آھن. توھان ان کي انسٽال ڪري سگھوٿا ان جي سرڪاري سائيٽ تي وڃي يا توھان استعمال ڪرڻ شروع ڪري سگھوٿا Vue.js فائل کي CDN لائبريري مان پڻ. هتي ڪجھ طريقا آهن استعمال ڪرڻ جا Vue.js توهان جي پروجيڪٽ ۾.
جيڪڏهن توهان ٽيگ استعمال ڪرڻ چاهيو ٿا <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 ڊائون لوڊ ڪرڻ لاء.
توھان پڻ استعمال ڪري سگھو ٿا Vue.js فائل CDN مان، توھان جي ايپليڪيشن ۾. لنڪ استعمال ڪريو https://unpkg.com/vue@3/dist/vue.global.js عنصر اندر <script>، جيئن هيٺ ڏنل:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Vue.js جديد سافٽ ويئر ٽيڪنالاجيز مان هڪ آهي جنهن کي وڏي پيماني تي ويب ڊولپمينٽ ۽ بلڊنگ سنگل پيج ايپليڪيشنز (SPA) لاءِ استعمال ڪيو ويندو آهي. جئين توهان نالو مان اندازو لڳائي سگهو ٿا، اهو گهڻو ڪري استعمال ڪيو ويندو آهي UI يا پروجيڪٽ جي ڊسپلي پاسي.
اچو ته توهان جي پروجيڪٽ ۾ Vue.js استعمال ڪرڻ جا فائدا ڏسو:
Vue.js جو هڪ وڏو فائدو اهو آهي ته اهو سائيز ۾ تمام ننڍو آهي. جاوا اسڪرپٽ فريم ورڪ جي ڪاميابي ان جي سائيز تي تمام گهڻو منحصر آهي ۽ هي دلچسپ جاوا اسڪرپٽ پلگ ان صرف 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 تمام سادو، مڪمل ۽ تفصيلي دستاويز مهيا ڪري ٿو، تنهن ڪري ڊولپرز جن کي HTML ۽ JavaScript جي باري ۾ ٿورو ڄاڻ آهي، ان کي پروگرام ۾ استعمال ڪري سگهن ٿا.
Vue.js ورچوئل DOM استعمال ڪري ٿو جهڙوڪ ٻين موجوده فريم ورڪ وانگر ReactJS، Ember، وغيره. ورچوئل DOM اصل HTML DOM جي ميموري ٽري جي نمائندگي ڪندڙ ھلڪو وزن آھي ۽ شروعاتي DOM کي متاثر ڪرڻ کان سواءِ اپڊيٽ ڪيو ويندو آھي.
Vue.js ان جي ماڊل View View Model (MVVM) آرڪيٽيڪچر سان ٻه طرفي ڪميونيڪيشن مهيا ڪري ٿي جيڪا HTML بلاڪن کي سنڀالڻ کي آسان بڻائي ٿي.
فريم ورڪ هڪ سسٽم سان گڏ اچي ٿو جيڪو اسان کي اجازت ڏئي ٿو اعلاني طور تي ڊيٽا کي 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 ۾ هدايتن جا ٻه قسم آهن:
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
رنگ سازي ذريعي سٺي موٽر صلاحيتن کي ترقي ڪرڻ ٻارن کي وڌيڪ پيچيده صلاحيتن لاء تيار ڪري ٿو جهڙوڪ لکڻ. رنگ ڏيڻ…
بحري شعبي هڪ حقيقي عالمي معاشي طاقت آهي، جيڪا 150 بلين مارڪيٽ جي طرف نيويگيٽ ڪئي آهي ...
گذريل سومر، فنانشل ٽائمز OpenAI سان هڪ ڊيل جو اعلان ڪيو. ايف ٽي پنهنجي عالمي سطح جي صحافت کي لائسنس ڏئي ٿو ...
لکين ماڻهو ادا ڪن ٿا اسٽريمنگ سروسز لاءِ، ادا ڪندا مھينا سبسڪرپشن فيس. اها عام راءِ آهي ته توهان…
