অগ্রাধিকার B নিয়ম: দৃঢ়ভাবে প্রস্তাবিত ​

বেশিরভাগ প্রকল্পে পঠনযোগ্যতা এবং/অথবা বিকাশকারীর অভিজ্ঞতা উন্নত করতে এই নিয়মগুলি পাওয়া গেছে। আপনি যদি সেগুলি লঙ্ঘন করেন তবে আপনার কোড এখনও চলবে, তবে লঙ্ঘনগুলি বিরল এবং যথাযথ হওয়া উচিত৷

কম্পোনেন্ট ফাইল ​

যখনই একটি বিল্ড সিস্টেম ফাইলগুলিকে সংযুক্ত করার জন্য উপলব্ধ থাকে, প্রতিটি কম্পোনেন্ট তার নিজস্ব ফাইলে থাকা উচিত।

এটি আপনাকে আরও দ্রুত একটি কম্পোনেন্ট খুঁজে পেতে সাহায্য করে যখন আপনাকে এটি সম্পাদনা করতে হবে বা কীভাবে এটি ব্যবহার করতে হবে তা পর্যালোচনা করতে হবে।

app.component('TodoList', {
  // ...
})

app.component('TodoItem', {
  // ...
})

components/
|- TodoList.js
|- TodoItem.js

components/
|- TodoList.vue
|- TodoItem.vue

একক-ফাইল কম্পোনেন্ট ফাইলের নাম আবরণ ​

একক-ফাইল কম্পোনেন্ট এর ফাইলের নাম হয় সর্বদা PascalCase বা সর্বদা কাবাব-কেস হওয়া উচিত।

PascalCase কোড এডিটরগুলিতে স্বয়ংসম্পূর্ণতার সাথে সর্বোত্তম কাজ করে, কারণ যেখানেই সম্ভব আমরা JS(X) এবং টেমপ্লেটগুলিতে কম্পোনেন্টগুলিকে কীভাবে উল্লেখ করি তার সাথে এটি সামঞ্জস্যপূর্ণ। যাইহোক, মিশ্র কেস ফাইলের নাম কখনও কখনও কেস-অসংবেদনশীল ফাইল সিস্টেমে সমস্যা তৈরি করতে পারে, যে কারণে কাবাব-কেসও পুরোপুরি গ্রহণযোগ্য।

components/
|- mycomponent.vue

components/
|- myComponent.vue

components/
|- MyComponent.vue

components/
|- my-component.vue

মূল কম্পোনেন্টের নাম ​

বেস কম্পোনেন্ট (ওরফে উপস্থাপনামূলক, মূক বা বিশুদ্ধ কম্পোনেন্ট) যেগুলি অ্যাপ-নির্দিষ্ট স্টাইলিং এবং নিয়মাবলী প্রয়োগ করে সবগুলি একটি নির্দিষ্ট উপসর্গ দিয়ে শুরু হওয়া উচিত, যেমন Base, App বা V।

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

দৃঢ়ভাবে সংযুক্ত উপাদান নাম ​

** চাইল্ড কম্পোনেন্টগুলি যেগুলি তাদের পিতামাতার সাথে দৃঢ়ভাবে সংযুক্ত থাকে তাদের একটি উপসর্গ হিসাবে পিতামাতার কম্পোনেন্টের নাম অন্তর্ভুক্ত করা উচিত।**

যদি একটি কম্পোনেন্ট শুধুমাত্র একটি একক অভিভাবক কম্পোনেন্টের প্রেক্ষাপটে অর্থবোধ করে, সেই সম্পর্কটি তার নামে স্পষ্ট হওয়া উচিত। যেহেতু সম্পাদকরা সাধারণত ফাইলগুলিকে বর্ণানুক্রমিকভাবে সংগঠিত করে, তাই এটি এই সম্পর্কিত ফাইলগুলিকে একে অপরের পাশে রাখে।

components/
|- TodoList/
   |- Item/
      |- index.vue
      |- Button.vue
   |- index.vue

components/
|- TodoList/
   |- Item/
      |- Button.vue
   |- Item.vue
|- TodoList.vue

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

কম্পোনেন্টের নামের মধ্যে শব্দের ক্রম ​

উপাদানের নাম সর্বোচ্চ-স্তরের (প্রায়শই সর্বাধিক সাধারণ) শব্দ দিয়ে শুরু হওয়া উচিত এবং বর্ণনামূলক পরিবর্তনকারী শব্দ দিয়ে শেষ হওয়া উচিত।

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputExcludeGlob.vue
|- SearchInputQuery.vue
|- SettingsCheckboxLaunchOnStartup.vue
|- SettingsCheckboxTerms.vue

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

স্ব-বন্ধ কম্পোনেন্ট ​

কোন বিষয়অবজেক্ট ছাড়া কম্পনেন্ট Single-File Components, স্ট্রিং টেমপ্লেট এবং JSX এ self-closing হওয়া উচিত - কিন্তু কখনই ইন-ডোম টেমপ্লেটগুলিতে নয়

যে কম্পোনেন্টগুলি স্ব-ঘনিষ্ঠ যোগাযোগ করে যে তাদের শুধুমাত্র কোন বিষয়অবজেক্ট নেই, কিন্তু মানে কোন বিষয়অবজেক্ট নেই। এটি একটি বইয়ের একটি ফাঁকা পৃষ্ঠা এবং "এই পৃষ্ঠাটি ইচ্ছাকৃতভাবে ফাঁকা রাখা" লেবেলযুক্ত একটির মধ্যে পার্থক্য। আপনার কোডটি অপ্রয়োজনীয় ক্লোজিং ট্যাগ ছাড়াই পরিষ্কার।

দুর্ভাগ্যবশত, HTML কাস্টম কম্পোনেন্টগুলিকে স্ব-বন্ধ হওয়ার অনুমতি দেয় না - শুধুমাত্র অফিসিয়াল "ভয়েড" কম্পোনেন্ট। এই কারণেই কৌশলটি তখনই সম্ভব যখন Vue-এর টেমপ্লেট কম্পাইলার DOM-এর আগে টেমপ্লেটে পৌঁছাতে পারে, তারপর DOM স্পেক-অনুবর্তী HTML পরিবেশন করতে পারে।

<!-- In Single-File Components, string templates, and JSX -->
<MyComponent></MyComponent>

<!-- In in-DOM templates -->
<my-component/>

<!-- In Single-File Components, string templates, and JSX -->
<MyComponent/>

<!-- In in-DOM templates -->
<my-component></my-component>

টেমপ্লেটগুলিতে কম্পোনেন্টের নাম আবরণ ​

বেশিরভাগ প্রজেক্টে, কম্পোনেন্টের নাম সবসময় Single-File Components এবং স্ট্রিং টেমপ্লেটে PascalCase হওয়া উচিত - কিন্তু ইন-ডোম টেমপ্লেটে কাবাব-কেস।

কাবাব-কেসের তুলনায় প্যাসকালকেসের কয়েকটি সুবিধা রয়েছে:

• সম্পাদকরা টেমপ্লেটে কম্পোনেন্টের নাম স্বয়ংসম্পূর্ণ করতে পারে, কারণ PascalCase জাভাস্ক্রিপ্টেও ব্যবহৃত হয়।
• <MyComponent> একটি একক-শব্দের HTML কম্পোনেন্ট থেকে <my-component> থেকে দৃশ্যতভাবে আলাদা, কারণ দুটি অক্ষরের পার্থক্য রয়েছে (দুটি বড় বড়), একটি (একটি হাইফেন) নয়।
• আপনি যদি আপনার টেমপ্লেটগুলিতে কোনো নন-ভিউ কাস্টম কম্পোনেন্ট ব্যবহার করেন, যেমন একটি ওয়েব কম্পোনেন্ট, PascalCase নিশ্চিত করে যে আপনার Vue কম্পোনেন্টগুলি স্পষ্টভাবে দৃশ্যমান থাকবে।

দুর্ভাগ্যবশত, HTML-এর ক্ষেত্রে অসংবেদনশীলতার কারণে, ইন-ডোম টেমপ্লেটগুলিকে এখনও কাবাব-কেস ব্যবহার করতে হবে।

এছাড়াও মনে রাখবেন যে আপনি যদি ইতিমধ্যেই কাবাব-কেস-এ প্রচুর বিনিয়োগ করে থাকেন, তাহলে HTML কনভেনশনের সাথে সামঞ্জস্যতা এবং আপনার সমস্ত প্রকল্পে একই কেসিং ব্যবহার করতে সক্ষম হওয়া উপরে তালিকাভুক্ত সুবিধার চেয়ে বেশি গুরুত্বপূর্ণ হতে পারে। এই ক্ষেত্রে, সব জায়গায় কাবাব-কেস ব্যবহার করাও গ্রহণযোগ্য।

<!-- In Single-File Components and string templates -->
<mycomponent/>

<!-- In Single-File Components and string templates -->
<myComponent/>

<!-- In in-DOM templates -->
<MyComponent></MyComponent>

<!-- In Single-File Components and string templates -->
<MyComponent/>

<!-- In in-DOM templates -->
<my-component></my-component>

<!-- Everywhere -->
<my-component></my-component>

JS/JSX-এ কম্পোনেন্ট নামের আবরণ ​

JS/JSX এ কম্পোনেন্টের নাম সবসময় PascalCase হওয়া উচিত, যদিও সেগুলি সহজ অ্যাপ্লিকেশনের জন্য স্ট্রিং-এর ভিতরে কাবাব-কেস হতে পারে যা শুধুমাত্র গ্লোবাল কম্পোনেন্ট রেজিস্ট্রেশন ব্যবহার করে app.component.

app.component('myComponent', {
  // ...
})

import myComponent from './MyComponent.vue'

export default {
  name: 'myComponent'
  // ...
}

export default {
  name: 'my-component'
  // ...
}

app.component('MyComponent', {
  // ...
})

app.component('my-component', {
  // ...
})

import MyComponent from './MyComponent.vue'

export default {
  name: 'MyComponent'
  // ...
}

পূর্ণ-শব্দ কম্পোনেন্টের নাম ​

উপাদানের নামগুলি সংক্ষিপ্ত রূপের চেয়ে সম্পূর্ণ শব্দকে প্রাধান্য দিতে হবে।

সম্পাদকদের স্বয়ংসম্পূর্ণতা দীর্ঘ নাম লেখার খরচ খুব কম করে তোলে, যখন তারা যে স্পষ্টতা প্রদান করে তা অমূল্য। অস্বাভাবিক সংক্ষেপণ, বিশেষ করে, সবসময় এড়ানো উচিত।

components/
|- SdSettings.vue
|- UProfOpts.vue

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

Prop নামের আবরণ ​

প্রপ নামগুলি ঘোষণার সময় সর্বদা ক্যামেলকেস ব্যবহার করা উচিত। ইন-ডোম টেমপ্লেটের ভিতরে ব্যবহার করা হলে, প্রপগুলি কাবাব-কেস করা উচিত। একক-ফাইল কম্পোনেন্ট টেমপ্লেট এবং JSX কাবাব-কেস বা ক্যামেলকেস প্রপস ব্যবহার করতে পারে। কেসিং সামঞ্জস্যপূর্ণ হওয়া উচিত - আপনি যদি ক্যামেলকেসড প্রপস ব্যবহার করতে চান তবে নিশ্চিত করুন যে আপনি আপনার অ্যাপ্লিকেশনে কাবাব-কেসড ব্যবহার করবেন না

props: {
  'greeting-text': String
}

const props = defineProps({
  'greeting-text': String
})

// for in-DOM templates
<welcome-message greetingText="hi"></welcome-message>

props: {
  greetingText: String
}

const props = defineProps({
  greetingText: String
})

// for SFC - please make sure your casing is consistent throughout the project
// you can use either convention but we don't recommend mixing two different casing styles
<WelcomeMessage greeting-text="hi"/>
// or
<WelcomeMessage greetingText="hi"/>

// for in-DOM templates
<welcome-message greeting-text="hi"></welcome-message>

মাল্টি-অ্যাট্রিবিউট কম্পোনেন্ট ​

একাধিক অ্যাট্রিবিউট সহ কম্পোনেন্টগুলির একাধিক লাইন বিস্তৃত হওয়া উচিত, প্রতি লাইনে একটি বৈশিষ্ট্য সহ।

জাভাস্ক্রিপ্টে, একাধিক লাইনে একাধিক বৈশিষ্ট্য সহ অবজেক্টকে বিভক্ত করা ব্যাপকভাবে একটি ভাল নিয়ম হিসাবে বিবেচিত হয়, কারণ এটি পড়া অনেক সহজ। আমাদের টেমপ্লেট এবং JSX একই বিবেচনার যোগ্য।

<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">

<MyComponent foo="a" bar="b" baz="c"/>

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>

<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

টেমপ্লেটে সরল অভিব্যক্তি ​

** কম্পোনেন্ট টেমপ্লেটগুলিতে কেবলমাত্র সাধারণ অভিব্যক্তিগুলি অন্তর্ভুক্ত করা উচিত, আরও জটিল অভিব্যক্তিগুলি গণনা করা বৈশিষ্ট্য বা পদ্ধতিতে পুনর্বিন্যাস করা উচিত৷**

আপনার টেমপ্লেটের জটিল অভিব্যক্তিগুলি তাদের কম ডিক্লেয়ার করে তোলে। আমাদের কী উপস্থিত হওয়া উচিত তা বর্ণনা করার চেষ্টা করা উচিত, কিভাবে আমরা সেই মানটি গণনা করছি না। গণনাকৃত বৈশিষ্ট্য এবং পদ্ধতিগুলি কোডটিকে পুনরায় ব্যবহার করার অনুমতি দেয়।

{{
  fullName.split(' ').map((word) => {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

<!-- In a template -->
{{ normalizedFullName }}

// The complex expression has been moved to a computed property
computed: {
  normalizedFullName() {
    return this.fullName.split(' ')
      .map(word => word[0].toUpperCase() + word.slice(1))
      .join(' ')
  }
}

// The complex expression has been moved to a computed property
const normalizedFullName = computed(() =>
  fullName.value
    .split(' ')
    .map((word) => word[0].toUpperCase() + word.slice(1))
    .join(' ')
)

সাধারণ গণনা করা বৈশিষ্ট্য ​

কমপ্লেক্স কম্পিউটেড প্রোপার্টি যতটা সম্ভব সহজ প্রপার্টিতে বিভক্ত করা উচিত।

computed: {
  price() {
    const basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}

const price = computed(() => {
  const basePrice = manufactureCost.value / (1 - profitMargin.value)
  return basePrice - basePrice * (discountPercent.value || 0)
})

computed: {
  basePrice() {
    return this.manufactureCost / (1 - this.profitMargin)
  },

  discount() {
    return this.basePrice * (this.discountPercent || 0)
  },

  finalPrice() {
    return this.basePrice - this.discount
  }
}

const basePrice = computed(
  () => manufactureCost.value / (1 - profitMargin.value)
)

const discount = computed(
  () => basePrice.value * (discountPercent.value || 0)
)

const finalPrice = computed(() => basePrice.value - discount.value)

উদ্ধৃত বৈশিষ্ট্য মান ​

খালি না HTML অ্যাট্রিবিউটের মানগুলি সর্বদা উদ্ধৃতির ভিতরে থাকা উচিত (একক বা দ্বিগুণ, যেটি JS-এ ব্যবহার করা হয় না)।

যদিও কোনো স্পেস ছাড়া অ্যাট্রিবিউট ভ্যালুর এইচটিএমএল-এ উদ্ধৃতি থাকার প্রয়োজন হয় না, এই অভ্যাসটি প্রায়শই স্পেস এড়িয়ে চলার দিকে নিয়ে যায়, অ্যাট্রিবিউটের মানগুলিকে কম পাঠযোগ্য করে তোলে।

<input type=text>

<AppSidebar :style={width:sidebarWidth+'px'}>

<input type="text">

<AppSidebar :style="{ width: sidebarWidth + 'px' }">

নির্দেশমূলক সংক্ষিপ্ত বিবরণ ​

নির্দেশমূলক সংক্ষিপ্ত বিবরণ (: এর জন্য v-bind:, @ এর জন্য v-on: এবং # এর জন্য v-slot ব্যবহার করা উচিত।

<input
  v-bind:value="newTodoText"
  :placeholder="newTodoInstructions"
>

<input
  v-on:input="onInput"
  @focus="onFocus"
>

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here's some contact info</p>
</template>

<input
  :value="newTodoText"
  :placeholder="newTodoInstructions"
>

<input
  v-bind:value="newTodoText"
  v-bind:placeholder="newTodoInstructions"
>

<input
  @input="onInput"
  @focus="onFocus"
>

<input
  v-on:input="onInput"
  v-on:focus="onFocus"
>

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

<template v-slot:footer>
  <p>Here's some contact info</p>
</template>

<template #header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here's some contact info</p>
</template>