ভিউ জেএস

ইউজার ইন্টারফেস বানানোর জন্য পার্ফোমেন্ট, ভার্সেটাইল জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক

নতুন ভিউ প্রজেক্ট বানানো

npm init vue@latest <your-project-name> 
cd <your-project-name> 
npm install 
npm run dev

ভিউ প্রজেক্ট বিল্ড করা
```
npm run build
```
CDN এর মাধ্যমে ভিউ ব্যবহার করা
```
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
```

ডাইনামিক ইউ-আর-এল বাইন্ডিং
```
:href='url'
```
ডাইনামিক ইউ-আর-এল বাইন্ডিং এবং ভেলু পাসিং
```
:href='`url/${id}`'
```
isActive এর সত্য/মিথ্যার উপর নির্ভর করে active ক্লাস বাইন্ডিং
```
:class='{active: isActive}'
```
ডাইনামিক style বাইন্ডিং
```
:style='{color: activeColor}'
```

কম্পোন্যান্ট ইন্স্ট্যান্স তৈরি হওয়ার পূর্বে ইনভোক হয়
```
beforeCreate()
```
কম্পোন্যান্ট ইন্স্ট্যান্স তৈরি হওয়ার পর যে হুক দ্বারা reactive data এবং events এক্সেস করা যায়
```
created()
```
কম্পোন্যান্ট মাউন্ট হওয়ার পূর্বের হুক
```
beforeMount()
```
কম্পোন্যান্ট মাউন্ট হওয়ার পর যে হুক দ্বারা ডোম ম্যানূপুল্যাট করা যায়
```
mounted()
```
কম্পোন্যান্ট এর ডাটা পরিবর্তন হলে যে হুক প্রথমে ইনভোক হয়
```
beforeUpdate()
```
কম্পোন্যান্ট এর ডাটা পরিবর্তন হলে এবং ডোম রি-রেন্ডার হলে যে হুক ইনভোক হয়
```
updated()
```
কম্পোন্যান্ট destroy করার পূর্বের হুক
```
beforeDestroy()
```
কম্পোন্যান্ট destroy হওয়ার পর যে হুক ইনভোক হয়
```
destroyed()
```

প্যারেন্ট কম্পোন্যান্ট থেকে চাইল্ড কম্পোন্যান্টে ডাটা পাঠানো যায়
```
<ChildComponent text='Vuejs is nice' />
```
চাইল্ড কম্পোন্যান্ট থেকে প্যারেন্ট কম্পোন্যান্টের ডাটা এনে রাখা
```
props: ['text']
```
চাইল্ড কম্পোন্যান্ট থেকে প্যারেন্ট কম্পোন্যান্টে ডাটা পাঠানো
```
this.$emit('clicked', 'someValue')
```
প্যারেন্ট কম্পোন্যান্ট থেকে চাইল্ড কম্পোন্যান্টের ডাটা ধরা
```
<ChildComponent @clicked='someFunction' />
```

এইচটিএমএল এলিমেন্ট ডোমে দেখানো/না দেখানো(সত্য/মিথ্যার উপর নির্ভর করে)
```
v-if/v-show
```
ডোম এলিমেন্টে ইভেন্ট যোগ করতে যে ডিরেক্টিভ ব্যবহার করা হয়
```
v-on
```
এইচটিএমএল এলিমেন্ট বাইন্ডিং
```
v-bind
```
Two-way ডাটা বাইন্ডিং
```
v-model
```
ডোমে এ্যারে/লিস্ট রেন্ডার করে দেখানো
```
v-for
```
এলিমেন্ট আপডেট করতে যে ডিরেক্টিভ ব্যবহার করা হয়
```
v-text
```
যে ডিরেক্টিভ দ্বারা এলিমেন্টের innerHTML আপডেট করা হয়(নিজস্ব ডাটা দিয়ে)
```
v-html
```
যে ডিরেক্টিভ দ্বারা এলিমেন্ট ও কম্পোনেন্ট একবার রেন্ডার করা হয়
```
v-once
```

ডিফল্ট বিহেইভিওর বন্ধ করা(যেমনঃ ফরম সাবমিটের পর রিলোড)
```
<form @submit.prevent='addUser'>...
```
ইভেন্ট একবার সংঘটিত করতে
```
<a @click.once='doThis'></a>
```
click ইভেন্ট এর প্রোপাগ্যাশন বন্ধ করতে
```
<a @click.stop='doThis'></a>
```
Vue Js এর সকল Event Modifier '.stop (Stop event propagation), .prevent (Prevent default behavior), .capture (Event inner element এ যাওয়া আগে capture করা), .self (Only triggering self target), .once (Trigger only one time), .passive (Use to improving performance on mobile)'
```
<div v-on:scroll.passive='doThis'></div>
```

ক্যাস্ড ভ্যালূ রিটার্ন করে যতক্ষণ পর্যন্ত ডিপেন্ডেন্সী পরিবর্তন হতে থাকে
```
computed()
```
ডাটা পরিবর্তন হওয়ার সাথে সাথে যে ফাংশন কাজ করে
```
watch()
```