প্রধান মেনু খুলুন

পরিবর্তনসমূহ

"Vue.js" পাতাটি অনুবাদ করে তৈরি করা হয়েছে

{{তথ্যছক সফটওয়্যার|name=Vue.js|logo=Vue.js Logo 2.svg|author=ইভান ইউ|released={{Start date and age|2014|2}}<ref>{{Cite web |url = http://blog.evanyou.me/2014/02/11/first-week-of-launching-an-oss-project/ |title = First Week of Launching Vue.js |website = Evan You }}</ref>|latest release version=2.6.10|latest release date={{Start date and age|2019|03|20}}<ref>{{cite web |url = https://github.com/vuejs/vue/releases |title = Vue.js Releases |website = GitHub }}</ref>|programming language=[[JavaScript]]|platform=|size=30.67 KB production<br />279 KB development|genre=[[JavaScript framework]]|license=[[MIT License]]<ref name="license">{{cite web |title = vue/LICENSE |url = https://github.com/vuejs/vue/blob/dev/LICENSE |website = GitHub |accessdate = 17 April 2017 }}</ref>|website={{URL|https://vuejs.org}}}} '''Vue.js''' (সাধারণভাবে '''ভু''' হিসাবে উল্লেখ করা হয়েছে; উচ্চারিত {{আধ্বব|{{IPAc-en|v|j|uː}}}} , মত '''মত''' ) হচ্ছে একটা [[মুক্ত সফটওয়্যার]] যা সাধারনত ইন্টারএক্টিভ ওয়েব এপলিকেশন তৈরির জন্য ব্যাবহার করা হয়ে থাকে । এবং যা [[সিংগেল পেজ এপ্লিকেশন]] তৈরির জন্য ব্যাবহার করা হয়ে থাকে <ref>{{ওয়েব উদ্ধৃতি|ইউআরএল=https://vuejs.org/v2/guide/#What-is-Vue-js|শিরোনাম=Introduction — Vue.js|ভাষা=en|সংগ্রহের-তারিখ=2017-03-11}}</ref>

== সংক্ষিপ্ত বিবরণ ==
Vue.js একটি ক্রমবর্ধমানভাবে গ্রহণযোগ্য আর্কিটেকচার বৈশিষ্ট্য সমৃদ্ধ এবং যা রেন্ডারিং এবং কম্পনেন্ট বেজ কাজ করে । কোন ফাংশানের এডভান্সড ফিচারের প্রয়োগের জন্য এর [[রাউটিং]] , স্টেট ম্যানেজমেন্ট এবং বিল্ড টুলিংয়ের এর ব্যাবহার শুনিসচিত করতে হবে যাতে সহায়তাকারী লাইব্রেরি এবং প্যাকেজগুলির অন্তুর্ভুক্তি থাকবে । <ref>{{ওয়েব উদ্ধৃতি|ইউআরএল=https://www.patreon.com/evanyou|শিরোনাম=Evan is creating Vue.js {{!}} Patreon|ওয়েবসাইট=Patreon|ভাষা=en|সংগ্রহের-তারিখ=2017-03-11}}</ref>

== ইতিহাস ==
ভু তৈরি করেছেন [[ইভান ইউ]] । যিনি এর আগে [[গুগল]] এর প্রডাক্ট [[এংগুলার যে এস]] ডেভেলপমেন্ট এ কাজ করেছেন । তিনি পরে তার চিন্তাধারার প্রক্রিয়াটি সংক্ষেপে তুলে ধরেন: "আমি মনে করি, আমি যদি এমন অংশটি বের করতে পারি যা কিনা সত্যি [[এংগুলার]] এর চাইতে হালকা হবে । " <ref>{{সংবাদ উদ্ধৃতি|ইউআরএল=https://betweenthewires.org/2016/11/03/evan-you/|শিরোনাম=Between the Wires {{!}} Evan You|তারিখ=2016-11-03|কর্ম=Between the Wires|সংগ্রহের-তারিখ=2017-08-26|আর্কাইভের-ইউআরএল=https://web.archive.org/web/20170603052649/https://betweenthewires.org/2016/11/03/evan-you/|আর্কাইভের-তারিখ=2017-06-03|অকার্যকর-ইউআরএল=yes}}</ref> ভু মূলত ফেব্রুয়ারী 2014 সালে মুক্তি পায়।

== বৈশিষ্ট্য ==
Vue ব্যবহারকারীরা ভু এর টেমপ্লেট সিস্টেম ইউজ করে কোড লিখতে পারেন বা JSX ব্যবহার করে সরাসরি রেন্ডার ফাংশন লিখতে পারেন । <ref>{{ওয়েব উদ্ধৃতি|ইউআরএল=https://vuejs.org/v2/guide/syntax.html|শিরোনাম=Template Syntax — Vue.js|ভাষা=en|সংগ্রহের-তারিখ=2017-03-11}}</ref> ভু এ ডাটা রেন্ডারিং পুরোটা কম্পোনেন্ট বেজ । । <ref>{{ওয়েব উদ্ধৃতি|ইউআরএল=https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#77d9|শিরোনাম=Vue 2.0 is Here!|শেষাংশ=|প্রথমাংশ=|তারিখ=2016-09-30|ওয়েবসাইট=The Vue Point|সংগ্রহের-তারিখ=2017-03-11}}</ref>

=== রিঅ্যাকটিবিটি ===
Vue একটি প্রতিক্রিয়াশীলতা সিস্টেম যা প্লেইন [[জাভাস্ক্রিপ্ট]] অবজেক্ট এবং অপটিমাজিং রি-রেন্ডার ব্যাবহার করে । প্রতিটি উপাদান তার রেন্ডারিংয়ের সময় তার ডিপেন্ডেন্সির উপরে খেয়াল রাখে , তাই সিস্টেম বুঝতে পারে কখন রি এবং কোন এলিমেন্ট রি রেন্ডার হচ্ছে <ref>{{ওয়েব উদ্ধৃতি|ইউআরএল=https://vuejs.org/v2/guide/reactivity.html|শিরোনাম=Reactivity in Depth — Vue.js|ভাষা=en|সংগ্রহের-তারিখ=2017-03-11}}</ref>

=== উপাদান ===
<syntaxhighlight lang="html" line="1">
<div id="tuto">
<button-clicked v-bind:initial-count="0"></button-clicked>
</div>

<script>
Vue.component('button-clicked', {
props: [ "initialCount" ],
data: () => ({
count: 0,
}),
template: `<button v-on:click="onClick">Clicked <nowiki>{{ count }}</nowiki> times</button>`,
computed: {
countTimesTwo() {
return this.count * 2;
}
}
watch: {
count(newValue, oldValue) {
console.log(`The value of count is changed from ${oldValue} to ${newValue}.`);
}
}
methods: {
onClick() {
this.count += 1;
}
},
mounted() {
this.count = this.initialCount;
}
});

new Vue({
el: '#tuto',
});
</script>
</syntaxhighlight>

*

=== রাউটিং ===
<syntaxhighlight lang="html" line="1">
<div id="app">
<router-view></router-view>
</div>
...

<script>
...
const User = {
template: '<div>User <nowiki>{{ $route.params.id }}</nowiki></div>'
}

const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
...
</script>
</syntaxhighlight> উপরের কোডটি:

# <code>websitename.com/user/<id></code> এ একটি ফ্রন্ট-এন্ড রাউট সেট করে।
# যা রেন্ডার হবে (কনস্টেবল ব্যবহারকারী। । । )
# ব্যবহারকারীর নির্দিষ্ট উপাদানটি পাস করার জন্য ব্যবহারকারীর উপাদানকে অনুমতি দেয় যা $ রুট অবজেক্টের <code>$route.params.id</code> কী ব্যবহার করে URL এ টাইপ করা হয়েছিল: <code>$route.params.id</code> ।
# ডম এর এলেমেন্ট গুলা এর মধ্যে <code><router-view></router-view></code> রেন্ডার করা হবে।
# অবশেষে জেনারেট করা HTML আউটপুট ফাইল : <code>websitename.com/user/1</code>

<br /><syntaxhighlight lang="html" line="1">
<div id="app">
<div>
<div>User 1</div>
</div>
</div>
</syntaxhighlight>



<ref>{{ওয়েব উদ্ধৃতি|ইউআরএল=https://router.vuejs.org/en/essentials/nested-routes.html|শিরোনাম=Vue Nested Routing (2)|শেষাংশ=You|প্রথমাংশ=Evan|ওয়েবসাইট=Vue Home Page (subpage)|সংগ্রহের-তারিখ=10 May 2017}}</ref>

== আরো দেখুন ==

* জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক তুলনা
* প্রতিক্রিয়া
* AngularJS
* কৌণিক
* জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক
* Javascript লাইব্রেরি
* মডেল দেখুন-ViewModel

== তথ্যসূত্র ==
<references group="" responsive=""></references>

== বাহ্যিক লিঙ্ক ==

* [https://vuejs.org/ অফিসিয়াল ওয়েবসাইট]
[[বিষয়শ্রেণী:প্রোগ্রামিং]]
[[বিষয়শ্রেণী:অপর্যালোচিত অনুবাদসহ পাতা]]
৩৬৬টি

সম্পাদনা