Jassif Team Institution

স্কোপড স্টাইলিং

একটি উপাদানের <style> ট্যাগের মধ্যে বা App.vue-তে সংজ্ঞায়িত স্টাইলিং আসলে সমস্ত উপাদান জুড়ে বিশ্বব্যাপী উপলব্ধ।

একটি উপাদানে শুধুমাত্র স্থানীয়ভাবে স্টাইলিং সংজ্ঞায়িত করতে, সেই উপাদানটিতে স্কোপ অ্যাট্রিবিউট ব্যবহার করুন: <style scoped>

গ্লোবাল স্টাইলিং

<style> ট্যাগের ভিতরে লেখা CSS যেকোন *.vue ফাইলে বিশ্বব্যাপী কাজ করে।

এর মানে হল যে যদি আমরা একটি *.vue ফাইলে <p> ট্যাগের ভিতরে <p> ট্যাগের জন্য একটি গোলাপী ব্যাকগ্রাউন্ড কালার সেট করি, তাহলে এটি সেই প্রোজেক্টের সমস্ত *.vue ফাইলের <p> ট্যাগগুলিকে প্রভাবিত করবে।

আপনার নিজস্ব Vue সার্ভার পান

এই অ্যাপ্লিকেশনটিতে আমাদের তিনটি *.vue ফাইল রয়েছে: App.vue, এবং দুটি উপাদান CompOne.vue এবং CompTwo.vue।

CompOne.vue CSS *.vue <p> :

<template>
  <p>This p-tag belongs to 'CompOne.vue'</p>
</template>

<script></script>

<style>
  p {
    background-color: pink;
    width: 150px;
  }
</style>

এটি কীভাবে কাজ করে তা দেখতে "এটি নিজে চেষ্টা করুন" বোতামে ক্লিক করুন৷

স্কোপড স্টাইলিং

আমরা <style> ট্যাগে 'স্কোপড' অ্যাট্রিবিউট ব্যবহার করি তা নিশ্চিত করতে যে একটি উপাদানের স্টাইলিং অন্য উপাদানের উপাদানগুলির স্টাইলিংকে প্রভাবিত করে না:

উদাহরণ

CompOne.vue <style> scoped attribute :

<template>
  <p>This p-tag belongs to 'CompOne.vue'</p>
</template>

<script></script>

<style scoped>
  p {
    background-color: pink;
    width: 150px;
  }
</style>

গ্লোবাল বনাম স্কোপড স্টাইলিং তুলনা

ভিউ টিউটোরিয়াল

এই টিউটোরিয়ালের অনেক অধ্যায় ব্যায়ামের সাথে শেষ হয় যা আপনার জ্ঞানের স্তর পরীক্ষা করতে পারে।

ব্যবহারিক টিপস