Vue.js په عمده توګه د غوښتنلیک د لید برخې باندې تمرکز کوي، چې د مخکینۍ پای پراختیا هم ویل کیږي. Vue.js ورځ په ورځ مشهور کیږي ځکه چې دا د نورو پروژو او کتابتونونو سره یوځای کول خورا اسانه دي. دا د نصب او کارولو لپاره خورا ساده دی.
Vue.js یو پرمختللی جاواسکریپټ چوکاټ دی د پرانيستې سرچينې د متقابل ویب کارن انٹرفیسونو او د واحد مخ غوښتنلیکونو (SPAs) رامینځته کولو لپاره کارول کیږي. Vue.js عموما د Vue په نوم یادیږي او د "view.js" یا "view" په توګه تلفظ کیږي.
د واحد پاڼې غوښتنلیک یا SPA یو ویب اپلیکیشن یا ویب پاڼه ده چې کاروونکو ته د ډیسټاپ اپلیکیشن په څیر خورا اسانه، ځواب ورکوونکي او چټکه تجربه وړاندې کوي. د یوې پاڼې غوښتنلیک په یوه پاڼه کې مینو، تڼۍ او بلاکونه لري. کله چې یو کاروونکی له دوی څخه یو باندې کلیک کوي، دا په متحرک ډول د سرور څخه د ټولو نویو پاڼو د پورته کولو پرځای اوسنۍ پاڼه بیا لیکي. دا د دې د ځواب ویونکي سرعت لامل دی.
Vue اساسا د مخکښې پراختیا لپاره رامینځته شوی ، نو دا باید ډیری HTML ، JavaScript او CSS فایلونه اداره کړي. Vue.js د کاروونکو لپاره دا اسانه کوي چې د HTML ځانګړتیاو سره HTML وغځوي چې د لارښوونو په نوم یادیږي. Vue.js جوړ شوي لارښوونې او ډیری لارښوونې وړاندې کوي defiد HTML غوښتنلیکونو فعالیت ښه کولو لپاره د کارونکي لخوا نایټ.
لاندې د Vue.js خورا مهم ځانګړتیاو لیست دی:
د Vue.js برخې د دې چوکاټ یو له مهمو ځانګړتیاوو څخه دي. دوی د بیا کارونې وړ کوډ ځای پرځای کولو لپاره د لومړني HTML عناصرو پراخولو لپاره کارول کیږي. تاسو کولی شئ په Vue.js غوښتنلیکونو کې د بیا کارونې وړ دودیز عناصر رامینځته کړئ چې وروسته بیا په HTML کې کارول کیدی شي.
Vue.js د HTML پر بنسټ ټیمپلیټونه چمتو کوي چې د Vue مثال ډیټا سره وړاندې شوي DOM شریکولو لپاره کارول کیدی شي. ټول Vue ټیمپلیټونه معتبر HTML دي چې د ځانګړي سره مطابقت لرونکي براوزرونو او HTML پارسرونو لخوا تجزیه کیدی شي. Vue.js ماډلونه د مجازی DOM رینډرینګ افعالونو کې تالیف کوي. Vue د براوزر تازه کولو دمخه اجزا مجازی DOM حافظې ته وړاندې کوي. Vue کولی شي د اجزاو لږترلږه شمیره هم محاسبه کړي ترڅو د بیا وړاندې کولو لپاره او د غوښتنلیک حالت بدلولو په وخت کې د DOM تخریب لږترلږه مقدار پلي کړي.
Vue د ځواب ویلو سیسټم چمتو کوي چې ساده جاواسکریپټ توکي کاروي او بیا رینډرینګ غوره کوي. په دې پروسه کې، هره برخه د خپل عکس العمل انحصار تعقیبوي، نو سیسټم په سمه توګه پوهیږي چې کله او کومې برخې بیا وړاندې کیږي.
د پاڼې نیویګیشن د ویو روټر په مرسته ترسره کیږي. تاسو کولی شئ د خپل واحد پاڼې غوښتنلیک لپاره په رسمي ډول ملاتړ شوی ویو روټر کتابتون وکاروئ.
Vue تاسو ته اجازه درکوي د مختلف لیږد اغیزې وکاروئ کله چې عناصر د DOM څخه داخل شوي ، نوي شوي یا لرې کیږي.
د Vue.js کارولو لپاره ډیری میتودونه شتون لري. تاسو کولی شئ دا د دې رسمي سایټ ته د تګ له لارې نصب کړئ یا تاسو کولی شئ د CDN کتابتون څخه د Vue.js فایل کارول پیل کړئ. دلته ستاسو په پروژه کې د 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 ډاونلوډ کړئ.
تاسو کولی شئ په خپل غوښتنلیک کې د 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 یو له وروستي سافټویر ټیکنالوژیو څخه دی چې په پراخه کچه د ویب پراختیا او د واحد پاڼې غوښتنلیکونو (SPA) جوړولو لپاره کارول کیږي. لکه څنګه چې تاسو د نوم څخه اټکل کولی شئ، دا اکثرا د پروژې د UI یا نندارې اړخ لپاره کارول کیږي.
راځئ چې ستاسو په پروژه کې د Vue.js کارولو ګټې وګورو:
د Vue.js یوه لویه ګټه دا ده چې دا په اندازې کې خورا کوچنی دی. د جاواسکریپټ چوکاټ بریالیتوب د هغې په اندازې پورې اړه لري او دا په زړه پورې جاواسکریپټ پلگ ان یوازې 18-21KB دی، نو تاسو کولی شئ په اسانۍ سره ډاونلوډ او په هیڅ وخت کې یې وکاروئ.
د Vue.js چوکاټ خورا ساده جوړښت لري او پوهیدل خورا اسانه دي. دا د دې چوکاټ د شهرت یو لامل دی. که تاسو د HTML او JavaScript سره بلد یاست، تاسو کولی شئ په اسانۍ سره په Vue.js کې کوډ وکړئ. کاروونکي کولی شي د ساده جوړښت له امله په اسانۍ سره Vue.js د دوی ویب پروژې ته اضافه کړي او غوښتنلیکونه رامینځته کړي.
Vue.js د هرڅه لپاره ډیری برخې لري او د موجوده غوښتنلیکونو سره خورا ګړندي مدغم کیدی شي. تاسو کولی شئ دا په جاواسکریپټ کې لیکل شوي هر غوښتنلیک سره مدغم کړئ.
د Vue.js انعطاف وړ طبیعت د React.js، Angular.js، او د جاوا سکریپټ کوم بل نوي چوکاټونو پراختیا کونکو لپاره د پوهیدو لپاره اسانه کوي. دا د HTML فایلونو، جاواسکریپټ فایلونو او خالص جاواسکریپټ فایلونو لیکلو لپاره د مجازی نوډونو کارولو لپاره خورا انعطاف چمتو کوي.
تاسو کولی شئ دودیز عناصر رامینځته کړئ چې د Vue.js غوښتنلیکونو کې د بیا کارولو وړ دي.
Vue.js خورا ساده، بشپړ او مفصل اسناد وړاندې کوي، نو هغه پراختیا کونکي چې د HTML او JavaScript په اړه لږ معلومات لري کولی شي دا پروګرام ته وکاروي.
Vue.js د نورو موجوده چوکاټونو لکه ReactJS، Ember، او نورو په څیر مجازی DOM کاروي. مجازی DOM د اصلي HTML DOM په حافظه کې د سپک وزن لرونکي ونې استازیتوب کوي او پرته له دې چې لومړني DOM اغیزه وکړي تازه کیږي.
Vue.js د خپل ماډل لید لید ماډل (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- مخکینۍ کاروي.
A 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-bin خاصیت لارښود دی. لارښوونې د v- مخکینۍ سره کارول کیږي ترڅو وښيي چې دا ځانګړي ځانګړتیاوې دي چې د Vue لخوا چمتو شوي، او د وړاندې شوي DOM لپاره د ځانګړي ځواب ویونکي چلند پلي کولو لپاره کارول کیږي.
د مثال پایله په لاندې ډول ده
Ercole Palmeri
سمندري سکتور یو ریښتینی نړیوال اقتصادي ځواک دی ، کوم چې د 150 ملیارد بازار په لور حرکت کړی ...
تیره دوشنبه، فایننشل ټایمز د OpenAI سره یوه معامله اعلان کړه. FT د نړۍ په کچه ژورنالیزم جواز ورکوي ...
ملیونونه خلک د سټیمینګ خدماتو لپاره تادیه کوي ، د میاشتنۍ ګډون فیس ورکوي. دا عام نظر دی چې تاسو…
د Veeam لخوا Coveware به د سایبر غصب پیښو غبرګون خدماتو چمتو کولو ته دوام ورکړي. Coveware به د عدلي او درملنې وړتیاوې وړاندې کړي ...
