ভুজেএস

Vue.js (সাধারণভাবে ভু ; উচ্চারিত  , মত মত ) হচ্ছে একটা মডেল-ভিউ-ভিউমডেল শৈলীর উন্মুক্ত-উৎসের সফটওয়্যার যা সাধারনত ইন্টারএক্টিভ ওয়েব এপলিকেশন তৈরির জন্য ব্যবহার করা হয়ে থাকে । ভ্যু ইউজার ইন্টারফেস তৈরির জন্য একটি প্রগতিশীল কাঠামো। এবং যা সিংগেল পেজ এপ্লিকেশন তৈরির জন্য ব্যবহার করা হয়ে থাকে   ভূ-জেস একটি অঙ্গুলার-জেস সমধর্মী স্ক্রিপ্টিং ভাষা। ভ্যূ মূলধারা থেকে ক্রমবর্ধমান গ্রহণযোগ্য হতে ডিজাইন করা হয়েছে।

ইতিহাস 
ভু তৈরি করেছেন ইভান ইউ ।  যিনি এর আগে গুগল এর প্রডাক্ট এংগুলার যে এস ডেভেলপমেন্ট এ কাজ করেছেন ।  তিনি পরে তার চিন্তাধারার প্রক্রিয়াটি সংক্ষেপে তুলে ধরেন: "আমি মনে করি, আমি যদি এমন অংশটি বের করতে পারি যা কিনা সত্যি এংগুলার এর চাইতে হালকা হবে । "   ভু মূলত ২০১৪ সালের ফেব্রুয়ারি মাসে মুক্তি পায়।

বিবরণ 
Vue.js একটি ক্রমবর্ধমানভাবে গ্রহণযোগ্য আর্কিটেকচার বৈশিষ্ট্য সমৃদ্ধ এবং যা রেন্ডারিং এবং কম্পনেন্ট বেজ কাজ করে । কোন ফাংশানের এডভান্সড ফিচারের প্রয়োগের জন্য এর  রাউটিং , স্টেট ম্যানেজমেন্ট এবং বিল্ড টুলিংয়ের এর ব্যবহার শুনিসচিত করতে হবে যাতে সহায়তাকারী লাইব্রেরি এবং প্যাকেজগুলির অন্তুর্ভুক্তি থাকবে । 

মডেল-ভিউ-ভিউমডেল শৈলীর অন্তর্ভুক্ত হওয়ায় এর গঠনকে ৩ ভাগে ভাগ করা যায় :

মডেল
স্ক্রিপ্ট ট্যাগের মধ্যবর্তি এই অংশে পশ্চাদপ্রান্তের পরিষেবা থেকে তথ্য কোনো অবজেক্টে অর্পণ করা হয়।

    data(){   
        return{
            testdata : "Hello",
        }
    },

ভিউমডেল 
এটির অবস্থান মূল জাভাস্ক্রিপ্ট ফাইলে(main.js) যা প্রারম্ভিক ফাইল গুলোর একটি। এটি মূলত একটি ভিত্তি যার ওপর মডেল ও ভিউ তাদের কার্যক্রম করে এবং নিজেদের মধ্যে সমন্বয় সাধন করে।

 new Vue({
   el : "#app",
 data : data 
 })

ভিউ
এটি প্রান্তিক অংশ যেটা ব্যবহারকারীদের প্রতি উন্মুক্ত হয়।

<template>
 <div id="app">
   {{testdata}}
 </div>
 </template>

বৈশিষ্ট্য 
Vue ব্যবহারকারীরা ভু এর টেমপ্লেট সিস্টেম ইউজ করে কোড লিখতে পারেন বা JSX ব্যবহার করে সরাসরি রেন্ডার ফাংশন লিখতে পারেন ।   ভু এ ডাটা রেন্ডারিং পুরোটা কম্পোনেন্ট বেজ । ।

রিঅ্যাকটিবিটি 
Vue একটি প্রতিক্রিয়াশীলতা সিস্টেম যা প্লেইন জাভাস্ক্রিপ্ট  অবজেক্ট এবং অপটিমাজিং রি-রেন্ডার ব্যবহার করে ।  প্রতিটি উপাদান তার রেন্ডারিংয়ের সময় তার ডিপেন্ডেন্সির উপরে খেয়াল রাখে , তাই সিস্টেম বুঝতে পারে কখন রি এবং কোন এলিমেন্ট রি রেন্ডার হচ্ছে

উপাদান   
<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>

রাউটিং  
<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> ভূ-জেস রাউটিং পরিষেবা প্রদান করে।

উপরের কোডটি:

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

<div id="app">
  <div>
    <div>User 1</div>
  </div>
</div>

পরিকাঠামো গঠন

স্ক্রিপ্ট ট্যাগ ব্যবহার করে
এটি সহজতম পদ্ধতি। এক্ষেত্রে ভূ এর ওয়েবসাইট  থেকে তার জাভাস্ক্রিপ্ট ফাইলটি ডাউনলোড করা এবং সেটি সরাসরি ব্যবহার করা।

এক্ষেত্রে ২ রকম জাভাস্ক্রিপ্ট ফাইল রয়েছে। একটি ডেভেলপমেন্ট সংস্করণ vue.js এবং অন্যটি প্রোডাকশন সংস্করণ(সিঞ্চিত সংস্করণ) vue.min.js ।

নিচে একটি নমুনা দেয়া হলো :
<html>
   <head>
      <script type = "text/javascript" src = "vue.min.js"></script>
   </head>
   <body></body>
</html>

কমান্ড-লাইন ইন্টারফেস ব্যবহার করে
পূর্ব-প্রয়োজনীয় হিসাবে নোড প্যাকেজ ম্যানেজার ইনস্টল করতে হবে। যদি তা থাকে তবে , প্রথমে CLI  ইনস্টল করতে : 
npm install --global vue-cli

ওয়েবপ্যাক মডিউল বান্ডলার ব্যবহার করে প্রজেক্ট শুরু করা 
vue init webpack <project name>

পরবর্তী অপশনগুলো সিলেক্ট করে নেয়া। স্ক্রিন এ প্রজেক্ট সফল তৈরির মেসেজ থাকবে।

এবার প্রজেক্ট টি চালাতে হলে , প্রথমে সেই প্রজেক্ট লোকেশন অব্দি যেতে হবে। তারপর নিম্নোক্ত কম্যান্ড চালাতে হবে : 
npm run dev

যদি প্রজেক্টটি ইতিমধ্যেই তৈরী অবস্থায় থাকে তবে চালাতে হলে , প্রথমে সেই প্রজেক্ট লোকেশন অব্দি যেতে হবে। তারপর নিম্নোক্ত কম্যান্ড চালাতে হবে : 
npm run serve

এইচটিটিপি গ্রাহক সংযোগ
ওয়েবে অ্যাপ্লিকেশন তৈরি করার সময় অনেক সময় কোনও এপিআই থেকে ডেটা গ্রাস করতে এবং প্রদর্শন করতে চাইতে হতে পারে। এটি করার বেশ কয়েকটি উপায় রয়েছে তবে খুব জনপ্রিয় পদ্ধতির মধ্যে রয়েছে এক্সিওস , যা একটি প্রতিশ্রুতি ভিত্তিক এইচটিটিপি গ্রাহক ।

এক্সিওস ইনস্টল করতে 
 npm install axios—save

একটি জাভাস্ক্রিপ্ট (.js) ফাইল তৈরী করতে হবে। ধরাযাক সেটি তৈরী হলো ../../js/apis/ স্থানে। নাম backend-apis.js

তাতে একটি get অনুরোধ করতে হলে নিম্নরূপ কোড হবে :
import axios from 'axios'
export default{
    getCustomers(phoneNumber){
        return axios.get('http://localhost:8111/callcenter/api/customerService/phone/' + phoneNumber,{timeout:5000});
    },
}

এবার যে ভূ ফাইলে থেকে অনুরোধটি সূচিত হবে তার মডেলের মধ্যে (স্ক্রিপ্ট ট্যাগ এর মধ্যে) 
import api  from '../../js/apis/backend-apis'
export default {
    data(){   
        return{
            searchPanelResponse: {}
        }
    },
    methods:
    {       
        getCustomers(phoneNo){
            if (phoneNo !== null && phoneNo !== undefined && phoneNo !== '') {
                api.getCustomers(phoneNo).then(
                response => {
                    this.searchPanelResponse = {
                        showCustList : true,
                        backEndResponse : response.data,
                        errors : {}
                    }
                    this.$store.commit('updateCustList', this.searchPanelResponse);
                    }).catch(error=>{
                        //error handling goes here                                       
                    })   
            }              
        }
    },   
}

আরও দেখুন 

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

তথ্যসূত্র

বহিঃসংযোগ 

 অফিসিয়াল ওয়েবসাইট

প্রোগ্রামিং
অপর্যালোচিত অনুবাদসহ পাতা
জাভাস্ক্রিপ্ট
কম্পিউটিং
ওয়েব ডেভেলপমেন্ট
সফটওয়্যার ফ্রেমওয়ার্ক
২০১৪-এ কম্পিউটার সম্পর্কিত প্রবর্তন
২০১৪-এর সফটওয়্যার
এমআইটি লাইসেন্স ব্যবহারকৃত সফটওয়্যার