ভিউ জেএস

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

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()