ভুজেএস

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

Vue.js

মূল উদ্ভাবক	ইভান ইউ
প্রাথমিক সংস্করণ	ফেব্রুয়ারি ২০১৪ (2014-02)
স্থিতিশীল সংস্করণ	2.6.10 / ২০ মার্চ ২০১৯ (2019-03-20)
রিপজিটরি	github.com/vuejs/core
যে ভাষায় লিখিত	JavaScript
আকার	30.67 KB production 279 KB development
ধরন	JavaScript framework
লাইসেন্স	MIT License
ওয়েবসাইট	vuejs.org

ইতিহাস

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

বিবরণ

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>

ভূ-জেস রাউটিং পরিষেবা প্রদান করে।

উপরের কোডটি:

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

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

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

স্ক্রিপ্ট ট্যাগ ব্যবহার করে

এটি সহজতম পদ্ধতি। এক্ষেত্রে ভূ এর ওয়েবসাইট vuejs.org/v2/guide/installation.html থেকে তার জাভাস্ক্রিপ্ট ফাইলটি ডাউনলোড করা এবং সেটি সরাসরি ব্যবহার করা।

এক্ষেত্রে ২ রকম জাভাস্ক্রিপ্ট ফাইল রয়েছে। একটি ডেভেলপমেন্ট সংস্করণ 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 লাইব্রেরি

বহিঃসংযোগ

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