ভিউ জেএস

ভিউ জেএস চিটশিট

    সবার সাথে শেয়ার করুন

ডিরেক্টিভ্স

  • এইচটিএমএল এলিমেন্ট, ডোম এ দেখানো/না দেখানো(সত্য/মিথ্যার উপর নির্ভর করে)

    v-if/v-show
  • এইচটিএমএল এলিমেন্ট বাইন্ডিং

    v-bind
  • Two-way ডাটা বাইন্ডিং

    v-model
  • এইচটিএমএল এলিমেন্ট এ ইভেন্ট যুক্ত করে, ইভেন্ট টাইপ আর্গুমেন্টে বলে দেওয়া

    v-on:click
  • ডোমে এ্যারে/লিস্ট রেন্ডার করে দেখানো

    v-for

বাইন্ডিং

  • ডাইনামিক ইউ-আর-এল বাইন্ডিং

    :href='url'
  • isActive এর সত্য/মিথ্যার উপর নির্ভর করে active ক্লাস বাইন্ডিং

    :class='{active: isActive}'
  • ডাইনামিক style বাইন্ডিং

    :style='{color: activeColor}'

ইভেন্ট

  • ডিফল্ট বিহেইভিওর বন্ধ করা(যেমনঃ ফরম সাবমিটের পর রিলোড)

    <form @submit.prevent='addUser'>...
  • ইভেন্ট একবার সংঘটিত করতে

    <a @click.once='doThis'></a>
  • click ইভেন্ট এর প্রোপাগ্যাশন বন্ধ করতে

    <a @click.stop='doThis'></a>

লাইফ সাইকেল হুক

  • কম্পোন্যান্ট ইন্স্ট্যান্স তৈরি হওয়ার পূর্বে ইনভোক হয়

    beforeCreate()
  • কম্পোন্যান্ট ইন্স্ট্যান্স তৈরি হওয়ার পর যে হুক দ্বারা reactive data এবং events এক্সেস করা যায়

    created()
  • কম্পোন্যান্ট মাউন্ট হওয়ার পূর্বের হুক

    beforeMount()
  • কম্পোন্যান্ট মাউন্ট হওয়ার পর যে হুক দ্বারা ডোম ম্যানূপুল্যাট করা যায়

    mounted()
  • কম্পোন্যান্ট এর ডাটা পরিবর্তন হলে যে হুক প্রথমে ইনভোক হয়

    beforeUpdate()
  • কম্পোন্যান্ট এর ডাটা পরিবর্তন হলে এবং ডোম রি-রেন্ডার হলে যে হুক ইনভোক হয়

    updated()
  • কম্পোন্যান্ট destroy করার পূর্বের হুক

    beforeDestroy()
  • কম্পোন্যান্ট destroy হওয়ার পর যে হুক ইনভোক হয়

    destroyed()

কম্পিউটেড প্রোপার্টি এবং ওয়াচ

  • ক্যাস্ড ভ্যালূ রিটার্ন করে যতক্ষণ পর্যন্ত ডিপেন্ডেন্সী পরিবর্তন হতে থাকে

    computed()
  • ডাটা পরিবর্তন হওয়ার সাথে সাথে যে ফাংশন কাজ করে

    watch()

কাস্টম ইভেন্ট

  • প্যারেন্ট কম্পোন্যান্ট থেকে চাইল্ড কম্পোন্যান্টে ডাটা পাঠানো যায়

    <ChildComponent text='Vuejs is nice' />
  • চাইল্ড কম্পোন্যান্ট থেকে প্যারেন্ট কম্পোন্যান্টের ডাটা এনে রাখা

    props: ['text']
  • চাইল্ড কম্পোন্যান্ট থেকে প্যারেন্ট কম্পোন্যান্টে ডাটা পাঠানো

    this.$emit('clicked', 'someValue')
  • প্যারেন্ট কম্পোন্যান্ট থেকে চাইল্ড কম্পোন্যান্টের ডাটা ধরা

    <ChildComponent @clicked='someFunction' />