পাখির চোখের দর্শন থেকে মান: ভ্যু.জেএস দিয়ে শুরু করা

সমস্ত সিএসএস বৈশিষ্ট্যের ডায়াগ্রাম সহ সিএসএস ভিজ্যুয়াল অভিধানের অনুলিপিটি পান।

আনস্প্ল্যাশ-এ স্যাম বার্কের ছবি

আপনি সবসময় ভ্যু ফ্রেমওয়ার্কে প্রোগ্রামিং শিখতে চেয়েছিলেন তবে কোনওভাবে আপনার সময়সূচির সময় নেই।

আপনি সমস্ত গ্রন্থাগার এবং ফ্রেমওয়ার্ক দ্বারা অভিভূত বোধ হতে পারে? এই পাখির চোখের দেখার টিউটোরিয়াল (শুরু করা) সহায়ক হতে পারে।

প্রতিক্রিয়াটির অনুরূপ, ভ্যু আপনার জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনটিকে কয়েকটি অংশে বিভক্ত করে:

  • অ্যাপ্লিকেশন অবজেক্ট
  • সদস্যদের পদ্ধতি এবং বৈশিষ্ট্য
  • এবং আসল দর্শন (এটি এইচটিএমএল উপাদানগুলি যেখানে অবস্থিত)।

মান v- ভিত্তিক এইচটিএমএল বৈশিষ্ট্যগুলি

ভ্যু উপাদানগুলির সাথে প্রচুর কাস্টম বৈশিষ্ট্য যুক্ত করে যা আপনি সাধারণত স্ট্যান্ডার্ড এইচটিএমএলে ভি- এর সাথে উপসর্গ করে দেখেন না।

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

বুলিয়ান সুইচ

ভি-শোয়ের আর একটি বৈশিষ্ট্য হ'ল তাদের দৃশ্যমানতার স্থিতির উপর ভিত্তি করে আইটেমগুলি টগল করা।

এটি কোনও ভ্যু অ্যাপ্লিকেশনটির বৈশিষ্ট্য ডেটাতে {বুলিয়ান: সত্য; as হিসাবে নির্দেশিত।

তারপরে আপনি আপনার এইচটিএমএল কোডে নির্দিষ্ট করতে পারবেন কোন উপাদানগুলি প্রদর্শিত হবে।

হ্যালো!

যখনই App.data.boolean সত্য হয়, এটি হবে এলিমেন্ট প্রদর্শিত হয়।

আপনার অ্যাপ্লিকেশন যুক্তি এখন এটি করতে পারেন আপনার কোডটিতে উপাদান সক্ষম বা নিষ্ক্রিয় করুন। পরিবর্তনটি স্বয়ংক্রিয়ভাবে রেন্ডার হয়।

লুপিং

ভি-ফর ডাইরেক্টিভটি HTML উপাদানগুলির তালিকা তৈরি করতে লুপ তৈরি করতে ব্যবহৃত হয় create

এর অর্থ হ'ল আপনি আপনার ভ্যু অ্যাপ্লিকেশনটির স্থানে অ্যারেতে সঞ্চিত ডেটার তালিকাগুলি রেন্ডার করতে এইচটিএমএল উপাদানগুলিতে প্রত্যক্ষগুলি সরাসরি এম্বেড করতে পারেন। আপনাকে বারবার একই HTML উপাদান টাইপ করতে হবে না।

এখানে একটি লুপ পুনরুক্তি করার একটি ক্লাসিক উদাহরণ।

প্রথমে আপনার অ্যাপ্লিকেশন অবজেক্টে ডেটা প্রস্তুত করুন:

আসুন E = নতুন মান ({এল: '# এল', // উপাদান আইডি = "এল" ডেটার লিঙ্ক: {নিবন্ধ: [{বার্তা: 'এক'}, {বার্তা: 'দুই'}, {বার্তা: ' তিন '}]}});

এখন আপনার মূল এইচটিএমএল অ্যাপ্লিকেশন ধারক মধ্যে:

  • । {item.message}

ভি-ফর ডাইরেক্টিভটি "আইটেমগুলিতে আইটেমের জন্য" বিন্যাসের।

এর অর্থ আপনি নিজের your {… এখানে…} op লুপে একটি নতুন পরিবর্তনশীল আইটেম তৈরি করেন। সম্পত্তি উপাদানগুলি অ্যাপ্লিকেশন ডেটা অবজেক্ট থেকেই আসে।

এটি আপনার উপাদানগুলির অ্যারেটিকে HTML উপাদান হিসাবে JSON অবজেক্টের সাথে রেন্ডার করবে!

এটি হাতে এইচটিএমএল কোড লেখার মতোই হবে:

এক দুই তিন

আমি প্রতিটি পৃথক ভি-ভিত্তিক বৈশিষ্ট্য এবং এই টিউটোরিয়ালে এটি কী করে তার বিশদগুলিতে যাব না। তবে আপনি দেখতে পাচ্ছেন যে এগুলি খুব কার্যকর হতে পারে।

আপনি ভ্যু অ্যাপ্লিকেশনগুলি তৈরি করতে এটি কীভাবে ব্যবহার করতে পারেন?

অ্যাপ্লিকেশন তৈরি করা হচ্ছে

এই স্থানীয় ভি-ভিত্তিক বৈশিষ্ট্যগুলির সাথে আপনার অ্যাপ্লিকেশন স্টেটের ডেটা একত্রিত করে আপনি আপনার যুক্তি এবং অ্যাপ্লিকেশন ভিউ রেন্ডারিংয়ের মধ্যে লিঙ্ক তৈরি করেন।

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

নীচের চিত্রটি এমন অ্যাপ্লিকেশন ফ্রেমওয়ার্ক যা আপনার সমস্ত ট্যাগ এবং টেমপ্লেটগুলিকে রেন্ডার করা হবে।

এটি প্রতিক্রিয়া দেওয়ার মতো অনেক কাজ করে। ভ্যূ আপনার মূল অ্যাপ্লিকেশন পরিচালনা করে পুরো অ্যাপ্লিকেশন জন্য ধারক হিসাবে। এটি অ্যাপ্লিকেশন অবজেক্টে বৈশিষ্ট্য এবং পদ্ধতি সঞ্চয় করে (নীচে দেখুন)।

স্ক্রিনশটে, নীল রেখাটি দেখায় যে আপনার অ্যাপ্লিকেশন ডেটা কীভাবে এইচটিএমএল উপাদানগুলির সাথে লিঙ্কযুক্ত যা দৃশ্যের প্রতিনিধিত্ব করে।

সবুজ রেখা ইভেন্টগুলির সাথে আপনার পদ্ধতিগুলিকে সংযুক্ত করে।

উপরের ছবিতে লাল রূপরেখা লক্ষ্য করুন। ভ্যুতে আপনাকে করতে হবে বৈশিষ্ট্যযুক্ত ইউআরএল: href এবং href বৈশিষ্ট্যের সাথে নয়। অন্যথায় লিঙ্কটি কাজ করবে না।

// সঠিক (অগ্রণী নোট করুন: href বৈশিষ্ট্যের আগে) {{url}}
// ত্রুটি (url শুরু হয় না) {{url}}

আবেদনের উপাত্ত

ভয়ে (বা এমনকি অন্যান্য অনুরূপ ফ্রেমওয়ার্ক বা গ্রন্থাগারগুলি) এ অ্যাপ্লিকেশন তৈরি করার সময়, আপনি সাধারণত আপনার ডেটার জন্য একটি প্রাথমিক অবস্থানের কথা ভাবেন। প্রতিক্রিয়া হিসাবে, এটি রাষ্ট্রীয় সম্পত্তি হতে পারে। ভ্যুতে এটি কেবল ডেটা অবজেক্টে সঞ্চিত থাকে।

ভ্যু ডকুমেন্টেশন নিজেই অনুসারে, ডেটা স্টোর - প্রায়শই সত্যের উত্স হিসাবে পরিচিত - মূল অ্যাপ্লিকেশন অবজেক্টে নিজেই কাঁচা ডেটা সম্পত্তিতে সংরক্ষণ করা হয়:

কনট উত্সঅফট্রুথ = {} কনট অ্যাপ্লিকেশন = নতুন ভ্যু ({ডেটা: উত্সঅফট্রুথ});

এ সম্পর্কে দুর্দান্ত বিষয়টি হ'ল আপনি ডেটাতে একটি মান সংরক্ষণ করতে পারেন: {...} সম্পত্তি এবং এটি আপনার HTML উপাদানগুলিতে ভি-টেক্সট, ভি-প্রি, ভি-একবার (কেবল একবার রেন্ডার করুন) এর মাধ্যমে স্বয়ংক্রিয়ভাবে উপলব্ধ করতে পারেন। এবং ভি-ক্লোকে (পৃষ্ঠাটি রেন্ডারিং শেষ না হওয়া পর্যন্ত অপেক্ষা করুন এবং ভ্যু মাউন্ট হওয়া পর্যন্ত) এবং আরও অনেকগুলি গুণাবলী।

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

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

অ্যাপ্লিকেশন অবধি মান

এখানে আপনি আপনার ডেটা শুরু করবেন এবং আপনার অ্যাপ্লিকেশন পদ্ধতিগুলি লিখবেন যা জিনিসগুলি সম্পন্ন করবে।

আপনি দেখতে পাচ্ছেন, তাদের নিয়মিত জাভাস্ক্রিপ্ট ক্লাসের মতো - অনেকগুলি সম্পত্তি এবং পদ্ধতি রয়েছে।

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

আপনি যদি এখনই শুরু করে থাকেন তবে সোজা কোডে ঝাঁপিয়ে পড়ার আগে কোনও পাখির চোখের জিনিস দেখে নেওয়া ভাল ধারণা।

যেহেতু আপনি কেবল কোডটি প্রবেশ করুন না