منطق کامپوننت Vue خود را با استفاده از شی Options تعریف کنید.

Vue.js شهرت خود را به عنوان یک چارچوب جاوا اسکریپت مترقی به دست آورده است. می توانید از Vue.js برای ساخت برنامه های تک صفحه ای (SPA) یا توسعه رابط های کاربری خاص استفاده کنید.

در اینجا شما اصول اولیه Vue.js، از جمله نحوه ایجاد کامپوننت Vue و کار با شی گزینه برای ارائه داده های پویا را خواهید آموخت.

از جمله Vue از طریق پیوند CDN

Vue.js یکی از محبوب ترین فریم ورک های جاوا اسکریپت است. برای شروع کار با Vue و افزودن آن به صفحه HTML خود، تگ اسکریپت زیر را کپی کرده و در قسمت head قرار دهید:

<script src="<https://unpkg.com/vue@3/dist/vue.global.js>"></script>

استفاده از پیوند CDN یک گزینه عالی برای بهبود HTML استاتیک یا افزودن عملکرد به برنامه شما است.

با این حال، باید Vue.js را از طریق npm نصب کنید تا از ویژگی‌های پیشرفته‌تر آن مانند سینتکس Single-File Component (SFC) استفاده کنید، که هنگام ساخت برنامه‌های Vue کامل مفید هستند.

ایجاد یک برنامه Vue

دسترسی به کتابخانه Vue از طریق پیوند CDN یک شی Vue، از جمله متد ()createApp.

همانطور که از نام آن پیداست، می توانید با استفاده از این روش یک برنامه Vue ایجاد کنید.

مثلا:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vue app</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <script>
      const app = Vue.createApp();
    </script>
  </body>
</html>

در اینجا برنامه ایجاد شده در متغیر app ذخیره می شود. پس از ایجاد نمونه برنامه، باید آن را با استفاده از متد ()mount رندر کنید. این روش به شما می گوید که کجا برنامه را در Document Object Model (DOM) نصب کنید.

اینطوری:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vue app</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const app = Vue.createApp();
      app.mount("#app");
    </script>
  </body>
</html>

برای استفاده از متد .mount () Vue، باید یک عنصر DOM یا انتخابگر به عنوان آرگومان ارائه دهید. در این مثال، ما برنامه Vue را با استفاده از عنصر DOM با شناسه #app mount کردیم.

مطلب مرتبط: 3 ارائه دهنده خدمات Backend-as-a-a-Service برای React Apps

توجه به این نکته مهم است که برنامه Vue فقط عناصری را کنترل می کند که با استفاده از یک شناسه مشخص شده اند. همچنین، برنامه کنترلی بر هیچ چیز خارج از آن عناصر، از جمله رویدادهای کلیک یا هر تعامل دیگر، ندارد.

آخرین مرحله ایجاد یک برنامه Vue فراخوانی متد ()mount پس از تکمیل تمام تنظیمات برنامه است.

Options Object در Vue

در Vue.js، شما از شی Options به عنوان یک شی پیکربندی برای ایجاد یک نمونه یا جزء Vue استفاده می کنید.

این بخش ضروری یک برنامه Vue است زیرا رفتار و داده‌ها را برای هر نمونه یا جزء تعریف می‌کند. شی Options شامل چندین ویژگی است که جنبه های مختلف نمونه یا جزء را نشان می دهد.

برخی از ویژگی های رایج مورد استفاده در شی Options عبارتند از:

data: این ویژگی شی داده را برای برنامه های Vue تعریف می کند. تابعی است که یک شی را برمی گرداند که حاوی ویژگی های داده و مقادیر اولیه آنها است.
روش‌ها: ویژگی روش‌های شی Options دارای عملکردهای حیاتی در فعال کردن رندر پویا است.
template: این ویژگی الگوی HTML را برای نمونه یا کامپوننت Vue تعریف می کند. این یک رشته حاوی نشانه گذاری HTML است که کامپایلر قالب Vue می تواند آن را تجزیه کند.

توجه داشته باشید که هنگام استفاده از یک ویژگی الگو، کامپایلر Vue فقط محتوای تعریف شده در قالب را ارائه می کند.

در اینجا نمونه ای از یک برنامه Vue با داده ها، روش ها و ویژگی های الگو آورده شده است:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vue app</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h1 @click="reverseMessage" >{{ text }}</h1>
    </div>
    <script>
      const app = Vue.createApp({
        // template: '<h1>Welcome to your Vue app</h1>',
        data() {
          return {
            text: "This is your Vue App"
          };
        },
        methods: {
          reverseMessage () {
            this.text = this.text.split('').reverse().join('')
          }
        }
    });
      app.mount("#app");
    </script>
  </body>
</html>

این برنامه یک برنامه اساسی Vue را به تصویر می کشد که متن “This is your Vue App” را با استفاده از درون یابی متن نمایش می دهد و به کاربران اجازه می دهد روی آن کلیک کنند تا پیام را معکوس کنند.

مطلب مرتبط: نحوه ایجاد CRUD API با استفاده از Node، PostgresQL و Express

تابع data() یک شی را با یک ویژگی منفرد به نام text برمی گرداند. دستور @click برای پیوست کردن متد ()reverseMessage به عنصر

استفاده می‌شود که ویژگی متن را معکوس می‌کند.

در اجرای این برنامه، برنامه Vue ایجاد شده به شکل زیر خواهد بود:

با کلیک بر روی متن آن را برعکس می کند.

توجه داشته باشید که برنامه به منظور اجازه دادن به محتویات موجود در برنامه Vue رندر، ویژگی الگو را نظر داده است. اگر بدون نظر باقی بماند، این برنامه Vue فقط یک ویژگی الگو را نشان می دهد:

ویژگی های دیگری مانند props و computed وجود دارد که می توانید از آنها برای ایجاد برنامه های قدرتمند و انعطاف پذیر Vue هنگام پیکربندی Options Object استفاده کنید.

درون یابی متن در Vue

درون یابی متن در Vue یک ویژگی است که به شما امکان می دهد داده ها را به صورت پویا به عناصر HTML متصل کنید. به عبارت دیگر، به شما این امکان را می دهد که به طور مستقیم مقدار ویژگی های داده یک نمونه Vue را در HTML خروجی بگیرید.

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

مثلا:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vue app</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
      <p>Welcome {{ name }}</p>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            message: "This is your Vue app.",
            name: "Noble",
          };
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

در این مثال، درون یابی متن، ویژگی های پیام و نام شی داده ای را که در نمونه Vue برگردانده شده است به عناصر

پیوند می دهد. هنگامی که برنامه Vue نصب شد، مقادیر پیام و ویژگی های نام را در HTML در موقعیت های مربوطه نمایش می دهد.

همچنین می‌توانید نتیجه فراخوانی متد را نمایش دهید یا عملیات پایه جاوا اسکریپت را در دو براکت فرفری انجام دهید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vue app</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
      <h3>Welcome {{ name.toUpperCase() }}</h3>
      <p>There are {{ nameLength() }} letters in your name.</p>
    </div>
    <p>not here</p>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            message: "This is your Vue App",
            name: "Noble Okafor",
          };
        },
        methods: {
          nameLength() {
            return this.name.length - 1;
          },
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

در این مثال، برنامه Vue دارای یک شی داده است که شامل دو ویژگی است: پیام و نام.

در داخل برنامه Vue، سه عنصر HTML داده ها را با استفاده از نمونه Vue نمایش می دهند. عنصر h1 مقدار ویژگی message را نمایش می دهد، در حالی که عنصر h3 مقدار ویژگی name را با یک متد toUpperCase () که روی آن اعمال می شود نمایش می دهد.

عنصر p نتیجه برگشتی متد nameLength() را که در شیء متدهای برنامه Vue تعریف شده است، نمایش می دهد. متد nameLength() طول خاصیت name را که با یک کم شده برمی گرداند.

برای دسترسی به یک مقدار از شی داده در شی روش، باید از این کلمه کلیدی استفاده کنید. این کلمه کلیدی به نمونه فعلی Vue اشاره دارد و به شما امکان می دهد از داخل نمونه Vue به ویژگی ها و روش های آن دسترسی داشته باشید. با استفاده از این، می توانید مقدار خاصیت name را بازیابی کنید و با استفاده از متدها، دستکاری های لازم را روی آن انجام دهید.

این برنامه Vue نحوه اتصال داده ها به عناصر HTML را با استفاده از درون یابی متن و نحوه تعریف و فراخوانی متدها در یک نمونه Vue را نشان می دهد.

Front-End خود را با استفاده از Vue بسازید

در این مقاله، نحوه شروع کار با Vue و درون یابی متن با نحو قالب Vue را یاد گرفتید. می‌توانید به چندین ویژگی دیگر در Vue مانند دستورالعمل‌ها و قلاب‌های چرخه حیات دسترسی داشته باشید، که آن را به گزینه‌ای عالی برای ساخت برنامه‌های جلویی پویا تبدیل می‌کند.

Tags: ای پی آی توسعه وب

شروع کار با Vue.js: درک شی Options

از جمله Vue از طریق پیوند CDN

ایجاد یک برنامه Vue

Options Object در Vue

درون یابی متن در Vue

Front-End خود را با استفاده از Vue بسازید

حمایت