3. پروژه [vuejs-01]: مبانی

برای توضیح کد اجراشده در [vuejs-00]، آن را در [vuejs-01] ساده‌سازی می‌کنیم. پوشه [vuejs-00] را در [vuejs-01] کپی می‌کنیم:

پروژه [vuejs-01] اساساً شامل چهار فایل است:

[main.js] و [2] نقاط ورود پروژه هستند؛
[App.vue, HelloWorld.vue] و [3-4] اجزای [Vue.js] هستند که به‌صورت اختیاری شامل عناصر زیر می‌باشند:
- [<template>...</template>]: کد HTML؛
- [<script>...</script>]: کد جاوااسکریپت مرتبط با کد HTML؛
- [<style>...</style>]: سبک CSS مرتبط با کد HTML;
[public/index.html] [5]: سند HTML که توسط فرمان [npm run serve] نمایش داده می‌شود؛

فایل [public/index.html] که هنگام اجرای پروژه نمایش داده می‌شود، به شرح زیر است:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vuejs</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- فایل‌های ساخت‌یافته به‌طور خودکار تزریق خواهند شد -->
  </body>
</html>

بنابراین این فایل HTML هیچ چیز را به‌صورت ایستا نمایش نمی‌دهد. هیچ کد HTML در اینجا وجود ندارد. نمایش پویا است: کد jS در پروژه، HTML را تولید می‌کند که برچسب [<div id=’app’>] را در خط 14 به‌طور کامل جایگزین می‌کند. کد HTML که توسط کد پروژه jS تولید شده و به جای تگ [<div>] در خط 14 قرار گرفته است، از تگ‌های [template] مربوط به QZXW نشأت می‌گیرد.2HTMLP000175ZQX کامپوننت‌ها، با فایل‌هایی که پسوند [.vue] را دارند.

کد HTML به‌صورت پویا در خط 14 توسط اسکریپت زیر [vuejs-01/main.js] درج می‌شود:


// واردات‌ها
import Vue from 'vue'
import App from './App.vue'

//پیکربندی
Vue.config.productionTip = false

// مثال‌سازی پروژه [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

توضیحات

خط ۲: شیء [Vue] توسط فریم‌ورک [vue.js] فراهم می‌شود؛
خط ۳: شیء [App] توسط فایل [vuejs-01/App.vue] فراهم می‌شود؛
خط ۶: پیکربندی شیء [Vue];
خطوط ۹–۱۱: این‌ها خطوطی هستند که:
- کد HTML برنامه را تولید می‌کند. خط ۱۰: این توسط فایل [App.vue] تولید می‌شود؛
- کد HTML تولیدشده در خط ۱۰ را در بخش [<div id=’app’></div>] از فایل [public/index.html] بارگذاری می‌کند؛

هر پروژه [Vue.js] می‌تواند فایل [index.html] را همان‌طور که هست حفظ کند.

فایل [App.vue] از پروژه اصلی [vuejs-00] در پروژه [vuejs-01] به شرح زیر ساده‌سازی شده است:


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

نظرات

یک قطعه [.vue] شامل حداکثر سه بخش است:
- [<template>...</template>]: از کد HTML؛
- [<script>...</script>]: کد جاوااسکریپت مرتبط با کد HTML;
- [<style>...</style>]: سبک CSS مرتبط با کد HTML;

در اینجا هیچ بخشی با نام [style] وجود ندارد.

خطوط ۱–۶: کد HTML برای قطعه (صفحه، مؤلفه، نما و غیره)؛
خطوط ۲–۵: بخش [template] ممکن است تنها شامل یک عنصر باشد. ما معمولاً یک بخش [div] را که کل HTML قطعه را در بر می‌گیرد، درج می‌کنیم. همچنین ممکن است یک تگ <template> را نیز درج کنیم؛
خط ۳: یک تصویر؛

خط ۴: یک کامپوننت به نام [HelloWorld]. اصل پشت [Vue.js] این است که صفحات وب را با استفاده از قطعات تعریف‌شده در فایل‌های [.vue]، مانند [App.vue] در اینجا، بسازد. این کامپوننت توسط فایل [HelloWorld.vue] تعریف شده است، همانطور که در خط ۹ اسکریپت مرتبط jS مشخص شده است؛
خط ۴: یک کامپوننت می‌تواند پارامترها را بپذیرد. پارامتر در اینجا ویژگی [msg] است؛
خطوط ۸–۱۷: اسکریپت jS برای قطعه (یا کامپوننت)؛
خط ۹: برای اینکه بتوان از کامپوننت [HelloWorld] درون کامپوننت [App] استفاده کرد، تعریف آن باید به بخش [script] وارد شود؛
خطوط ۱۱–۱۶: اسکریپت یک شیء را تعریف کرده و آن را صادر می‌کند تا در خارج از آن در دسترس باشد؛
خط ۱۲: ویژگی [name] نام کامپوننت صادرشده را تعریف می‌کند؛
خطوط ۱۳–۱۵: ویژگی [components]، کامپوننت‌های مورد استفاده توسط کامپوننت [App] را فهرست می‌کند. این‌ها به همراه آن صادر می‌شوند؛

خط ۹: نیازی نیست که نام کامپوننت [HelloWorld] با نام فایلی که آن را تعریف می‌کند یکسان باشد. می‌توان آن را به عنوان [X] وارد و به عنوان کامپوننت [Bonjour] صادر کرد:

خط ۱۴: کامپوننت [X] با نام [Bonjour] صادر می‌شود. سپس در خط ۴ با همین نام استفاده می‌شود؛

نسخه اول رایج‌ترین است، بنابراین ما کامپوننت‌های خود را به این صورت تعریف خواهیم کرد؛


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

خط ۱۴ مخففی برای کد [HelloWorld : HelloWorld] است: کامپوننت [HelloWorld] (در سمت راست، وارد شده در خط ۹) تحت نام [HelloWorld] (در سمت چپ) صادر می‌شود.

ما کامپوننت [HelloWorld.vue] را به صورت زیر ساده می‌کنیم:


<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

نظرات

کامپوننت [HelloWorld] ساختار فایل یکسانی با کامپوننت اصلی [App] دارد؛
خط ۳: این شامل ارزیابی یک عبارت جاوااسکریپت است، در این مورد عبارت [msg]؛
خطوط ۱۰–۱۲: ویژگی‌های کامپوننت را تعریف می‌کنند، یا دقیق‌تر، پارامترهای آن. وقتی کامپوننت [App] یک کامپوننت [HelloWorld] را نمونه‌سازی کرد، این کار را با استفاده از سینتکس زیر انجام داد:


<HelloWorld msg="Notre première application Vue.js" />

کامپوننت [HelloWorld] با تخصیص یک مقدار به پارامتر (ویژگی) [msg] نمونه برداری می‌شود. اگر دنباله [template] از کامپوننت [HelloWorld] را دنبال کنیم، به صورت زیر در می‌آید:


<div>
    <h1>Notre première application Vue.js</h1>
</div>

خطوط ۷–۱۴: ویژگی‌های کامپوننت به‌عنوان یک شیء تعریف شده که صادر می‌شود؛
- خط ۹: کامپوننت تحت نام [HelloWorld] صادر می‌شود؛
- خطوط ۱۰–۱۲: پارامترهای آن توسط خاصیت [props] تعریف می‌شوند؛

در نهایت، اگر قالب‌های دو کامپوننت [App, HelloWorld] مورد استفاده را با هم ترکیب کنیم، فایل نمایش داده شده [index.html] به شکل زیر خواهد بود:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>vuejs</title>
</head>
<body>
  <noscript>
    <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>
      <h1>Notre première application Vue.js</h1>
    </div>
  </div></body>
</html>

ما برنامه را با ویرایش دستور [serve] [1] در فایل [package.json] راه‌اندازی می‌کنیم:

صفحه نمایش داده شده سپس [2] است.

اکنون بیایید به کد این صفحه نگاهی بیندازیم:

در [1]، به [clic droit] تغییر دهید؛
به [2]، کد منبع صفحه. می‌توانیم ببینیم که این کد مربوط به فایل اولیه [index.html] است و این چیزی نیست که نمایش داده شده باشد. در واقع، صفحه [index.html] بود که در ابتدا بارگذاری شده بود. سپس، کد جاوااسکریپت این صفحه را به صورت پویا تغییر داد، اما این به ما نشان داده نمی‌شود؛

وقتی صفحات به‌صورت پویا توسط جاوااسکریپت تولید می‌شوند، گزینه [2] هیچ کاربردی ندارد. برای مشاهده کد صفحهٔ در حال نمایش باید به ابزارهای مرورگر (F12 در فایرفاکس) بروید:

در [1]، بازرس مدل شیء مستند (DOM) برای سند نمایش‌داده‌شده؛
به [2]، که محتوای واقعی DOM را نشان می‌دهد؛
[3-4]، ابزاری که برای نمایش اشیاء جاوااسکریپت مورد استفاده توسط چارچوب [Vue.js] استفاده خواهیم کرد؛
[4] یک افزونه (در این مورد برای فایرفاکس) برای عیب‌یابی برنامه‌های [Vue.js] است:
- برای فایرفاکس: [https://addons.mozilla.org/fr/firefox/addon/vue-js-devtools/];
- برای کروم: [https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd];

بیایید نگاهی به زبانه [Vue] [4] بیندازیم:

نما [1-4] ساختار سند [Vue.js] را به ما نشان می‌دهد: ریشه سند [2] (index.html) شامل کامپوننت [App] (3) است که به نوبه خود شامل کامپوننت [HelloWorld] (4) می‌باشد. کلیک روی [4]، ویژگی‌های اجزای [HelloWorld] و [5] را نمایش می‌دهد.

در [4] (سمت راست)، می‌توانید نشانگر [$vm0] را مشاهده کنید. این نام متغیری است که می‌توان در کنسول JavaScript [6] برای اشاره به شیء [HelloWorld] استفاده کرد. بیایید این کار را انجام دهیم:

در [2]، عبارت [$vm0] را ارزیابی می‌کنیم که ساختار آن را نمایش می‌دهد. به طور معمول، نیازی نداریم که این ساختار را مستقیماً استفاده کنیم؛

بیایید با نمایش قابلیت [hot reload] در داخل دستور [serve] که برای اجرای پروژه استفاده می‌شود، کار را به پایان برسانیم:

در [App.vue]، پیام نمایش‌داده‌شده توسط [HelloWorld] را تغییر دهید:

در [1]، پیام نمایش داده شده تغییر می‌کند؛
در [2-3]، صفحه به‌طور خودکار بدون هیچ اقدامی از سوی ما به‌روزرسانی می‌شود؛

اکنون پروژه‌های مختلفی از [vuejs-xx] ایجاد خواهیم کرد تا نکات کلیدی [Vue.js] را نشان دهیم. با «کلیدی» منظورمان آن‌هایی است که در کلاینت [vue.js] سرور محاسبه مالیات استفاده خواهیم کرد. سایر نکات «مهم» در صورتی که در کلاینت استفاده نشوند، حذف خواهند شد. بنابراین این مطلب قرار نیست ارائه‌ای جامع از [vue.js] باشد.