فصل جدید و پروژه جدید

New Chapter and new Project

در فصل قبل به طور مفصل در مورد کامپوننت ها و قابلیت هایشان صحبت کردیم و حالا به جرات می توان گفت که دانش خوبی نسبت به آن ها داریم. طبیعتا قدم بعد وارد شدن به دنیای کدنویسی و استفاده عملی از این دانش است تا دستمان در کدنویسی روان شود. برای پروژه جدیدمان فایل هایی را از قبل آماده کرده ام که می توانید آن ها را از این لینک دانلود کنید. در فایلی که به شما داده ام از یک فونت استفاده شده است بنابراین آن را حذف نکنید.

پروژه ما در نهایت شبیه به این تصویر خواهد شد:

ظاهر پروژه ی qoute در Vue — ظاهر پروژه qoute در Vue

پروژه ما قرار است قسمتی داشته باشد که ما در آن 10 quote (سخن قصار) را اضافه می کنیم و در همان صفحه نمایش داده می شوند. progress bar بالای صفحه نیز به حذف یا اضافه کردن quote ها به روز رسانی می شود، مثلا اگر یک quote جدید اضافه کنیم، یک واحد به جلو رفته و در صورتی که quote ای را حذف کنیم یک واحد به عقب می رود. این progress bar را با استفاده از بوت استرپ ایجاد کرده ایم و می توانید لینک CDN آن را درون فایل index.html پیدا کنید:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

در نهایت اگر موس خود را روی هر کدام از این quote ها ببرید، آن quote قرمز شده و موس شما به شکل cursor در می آید و اگر روی آن کلیک کنید quote حذف می شود. قسمت info در پایین صفحه نیز یک کلاس info ساده است که با بوت استرپ ایجاد شده و می توانیم آن را در فایل اصلی App.vue یا هر جای دیگری پیاده سازی کنیم.

برای شروع مثل همیشه دستور npm run dev را اجرا کنید تا سرور ما شروع به کار کند. سپس وارد فایل App.vue شده و اولین خصوصیات data را تعریف می کنیم:

<script>
export default {
  data: function() {
    return {
      quotes: ["Just a Quote to see something"],
      maxQuotes: 10
    };
  }
};
</script>

Data من دو خصوصیت دارد: اولین خصوصیت quotes است که یک آرایه می باشد. تمام quote های ما درون این آرایه قرار خواهند گرفت و در اینجا ذخیره سازی می شوند. من در ابتدای کار یک عضو را برایش تعریف کرده ام تا چیزی برای نمایش در مرورگر وجود داشته باشد. خصوصیت دوم maxQuotes است که حداکثر تعداد quote مجاز را نمایش می دهد. من گفته ام که به کاربر اجازه اضافه کردن بیش از 10 quote را نده.

در مرحله بعدی در پوشه src یک پوشه دیگر به نام components می سازیم که خودش حاوی فایل های QuoteGrid.vue و Quote.vue باشد. من ابتدا با فایل QuoteGrid.vue شروع می کنم و ساختار همیشگی خود را در آن می نویسم:

<template></template>

<script>
export default {
    
};
</script>

<style>
</style>

قبل از تکمیل کردن این فایل به شما یادآوری می کنم که در فایل App.vue چنین کدی را داریم:

<template>
  <div class="container"></div>
</template>

یعنی از یک div با کلاس container استفاده می کنیم و از آنجایی که پروژه ما با بوت استرپ کار می کند این container از نوع بوت استرپ است بنابراین به row نیاز دارد. بر این اساس در همین فایل (QuoteGrid.vue) می گویم:

<template>
  <div class="row">
      
  </div>
</template>

من می خواهم در این فایل آرایه quotes را دریافت کنم (همان آرایه ای که محل ذخیره quote ها بود) بنابراین می توانیم از props استفاده کنیم و آن ها را بگیریم:

<script>
export default {
    props: ['quotes']
};
</script>

این کار برای دریافت quotes است اما هنوز کامپوننتی آن را به ما پاس نداده است که بعدا روی آن کار می کنیم. برای گردش بین Quotes باید کامپوننت quote.vue را تکمیل کنیم بنابراین وارد آن شده و کد های زیر را برایش بنویسید:

<template>
</template>

<script>
</script>

<style>
.panel-body {
  font-family: "Arizonia", cursive;
  font-size: 24px;
  color: #6e6e6e;
}
.quote {
  cursor: pointer;
}

.quote:hover {
  background-color: #ffe2e2;
}
</style>

در قدم اول استایل های بالا به این فایل اضافه شده است. یادتان باشد که panel-body یک کلاس پیش فرض در بوت استرپ است اما من می خواهم آن را کمی ویرایش کنم به همین خاطر این کد ها را برایش نوشته ام. تنها نکته ای که در این کد ها وجود دارد، فونت Arizonia است که در فایل index.html بارگذاری شده است و نیازی نیست شما کاری انجام بدهید:

    <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>

از آنجایی که این کامپوننت مخصوص quote ها است، استایل های تعریف شده در آن مخصوص quote ها است و سلیقه ای می باشد. شما می توانید هر کدام از این استایل ها را تغییر دهید.

در مرحله بعد باید کد های قسمت template را در همین فایل تکمیل کنیم:

<template>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="panel panel-default">
      <div class="panel-body quote">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

تمام کلاس هایی که به این قسمت اضافه کرده ام، چند کلاس ساده مربوط به بوت استرپ است بنابراین توضیح خاصی ندارد که به Vue مربوط باشد. تنها قسمت مهم آن استفاده از <slot> است. ما می دانیم که محتوای quote ها از بیرون از این کامپوننت می آید (از فایل QuoteGrid.vue) بنابراین از یک Slot استفاده می کنیم تا آن را نمایش بدهیم.

در قسمت بعد واردQuoteGrid.vue شده و با یک حلقه for بین quotes گردش می کنیم.