ডেভসংকেত

ভিউ জেএস

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

কন্ট্রিবিউটর

  • ahmadeyamin
  • bdmotaleb
  • lahin31

শেয়ার করুন

ডিরেক্টিভ্স

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

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

বাইন্ডিং

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

    :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' />

ডেভসংকেত সম্পর্কে

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

স্পন্সর