مقالات

برنامه Single Page چیست و Vue.js چیست

Vue.js یک چارچوب جاوا اسکریپت متن‌باز و مترقی است که برای توسعه رابط‌های کاربر وب تعاملی و برنامه‌های کاربردی تک صفحه‌ای استفاده می‌شود.

Vue.js عمدتاً بر روی بخش تجسم برنامه که توسعه front-end نیز نامیده می شود تمرکز دارد. Vue.js روز به روز محبوب می شود زیرا ادغام با پروژه ها و کتابخانه های دیگر بسیار آسان است. نصب و استفاده از آن بسیار ساده است.

محتویات

Vue.js چیست؟

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

برنامه تک صفحه ای (SPA) چیست؟

A Single Page Application یا SPA یک برنامه تحت وب یا وب سایتی است که تجربه ای بسیار روان، واکنشگرا و سریع شبیه به یک برنامه دسکتاپ را در اختیار کاربران قرار می دهد. یک برنامه تک صفحه ای شامل یک منو، دکمه ها و بلوک ها در یک صفحه است. هنگامی که کاربر روی یکی از آنها کلیک می کند، به جای بارگیری صفحات جدید از یک سرور، به صورت پویا صفحه فعلی را بازنویسی می کند. این دلیل سرعت پاسخگویی آن است.

Vue اساسا برای توسعه frontend توسعه یافته است، بنابراین باید فایل های HTML، جاوا اسکریپت و CSS زیادی را مدیریت کند. Vue.js گسترش HTML را با ویژگی های HTML به نام دایرکتیو برای کاربران آسان می کند. Vue.js دستورالعمل های داخلی و بسیاری از دستورالعمل ها را ارائه می دهد defiتوسط کاربر برای بهبود عملکرد برنامه های HTML مشخص شده است.

ویژگی های Vue.js

در زیر لیستی از مهم ترین ویژگی های Vue.js آمده است:

اجزاء

اجزای Vue.js یکی از ویژگی های مهم این فریم ورک است. آنها برای گسترش عناصر اصلی HTML به منظور کپسوله کردن کدهای قابل استفاده مجدد استفاده می شوند. می‌توانید عناصر سفارشی قابل استفاده مجدد را در برنامه‌های Vue.js ایجاد کنید که بعداً می‌توانند در HTML دوباره استفاده شوند.

قالب

Vue.js قالب‌های مبتنی بر HTML را ارائه می‌کند که می‌توان از آنها برای مرتبط کردن DOM رندر شده با داده‌های نمونه Vue استفاده کرد. همه قالب های Vue HTML معتبری هستند که می توانند توسط مرورگرهای سازگار با مشخصات و تجزیه کننده های HTML تجزیه شوند. Vue.js مدل ها را در توابع رندر DOM مجازی کامپایل می کند. Vue قبل از رفرش کردن مرورگر، اجزا را در حافظه مجازی DOM رندر می کند. Vue همچنین می‌تواند حداقل تعداد مؤلفه‌ها را برای رندر مجدد محاسبه کرده و حداقل مقدار دستکاری DOM را هنگام تغییر وضعیت برنامه اعمال کند.

واکنش پذیری

Vue یک سیستم پاسخگویی ارائه می دهد که از اشیاء ساده جاوا اسکریپت استفاده می کند و رندر مجدد را بهینه می کند. در این فرآیند، هر مؤلفه وابستگی‌های واکنشی خود را پیگیری می‌کند، بنابراین سیستم دقیقاً می‌داند چه زمانی و کدام مؤلفه‌ها را دوباره رندر کند.

مسیریابی

پیمایش صفحه با کمک vue-router انجام می شود. می توانید از کتابخانه vue-router که به طور رسمی پشتیبانی می شود برای برنامه تک صفحه ای خود استفاده کنید.

انتقال ها

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

چگونه Vue.js را نصب کنیم؟

روش های مختلفی برای استفاده از Vue.js وجود دارد. می توانید آن را با رفتن به سایت رسمی آن نصب کنید یا می توانید از فایل Vue.js از کتابخانه CDN نیز استفاده کنید. بیایید در زیر چند راه برای استفاده از Vue.js در پروژه خود ببینیم.

به طور مستقیم در فایل HTML

اگر می خواهید از تگ استفاده کنید <script> از Vue.js به طور مستقیم در فایل HTML خود، باید آن را از وب سایت رسمی دانلود کنید.

<html>  
   <head>  
      <script type = "text/javascript" src = "vue.min.js"></script>  
   </head>  
   <body>
   </body>  
</html>

بیایید به وب سایت رسمی Vue.js برویم https://vuejs.org/v2/guide/installation.html برای دانلود vue.js با توجه به نیاز شما.

با استفاده از CDN

همچنین می توانید از فایل Vue.js از CDN در برنامه خود استفاده کنید. از پیوند https://unpkg.com/vue@3/dist/vue.global.js در داخل عنصر استفاده کنید <script>، مانند زیر:

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

مزایای استفاده از Vue.js

Vue.js یکی از جدیدترین فناوری‌های نرم‌افزاری است که به طور گسترده برای توسعه وب و ساخت اپلیکیشن‌های تک صفحه (SPA) استفاده می‌شود. همانطور که از نام آن حدس می زنید، بیشتر برای UI یا سمت نمایش پروژه استفاده می شود.

بیایید مزایای استفاده از Vue.js در پروژه خود را ببینیم:

سایز بسیار کوچک

یکی از بزرگترین مزایای Vue.js این است که اندازه آن بسیار کوچک است. موفقیت یک فریم ورک جاوا اسکریپت بستگی زیادی به اندازه آن دارد و این افزونه جاوا اسکریپت هیجان انگیز تنها 18 تا 21 کیلوبایت است، بنابراین می توانید به راحتی آن را دانلود و در کمترین زمان استفاده کنید.

آسان برای درک و کد

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

ادغام ساده با برنامه های موجود

Vue.js دارای اجزای بسیاری برای همه چیز است و می تواند خیلی سریع با برنامه های موجود ادغام شود. می توانید آن را با هر برنامه ای که در جاوا اسکریپت نوشته شده است ادغام کنید.

طبیعتا انعطاف پذیر است

ماهیت انعطاف پذیر Vue.js همچنین درک آن را برای توسعه دهندگان React.js، Angular.js و هر چارچوب جدید جاوا اسکریپت آسان می کند. این انعطاف پذیری زیادی برای استفاده از گره های مجازی برای نوشتن فایل های HTML، فایل های جاوا اسکریپت و فایل های جاوا اسکریپت خالص فراهم می کند.

اجزاء

می توانید عناصر سفارشی ایجاد کنید که در برنامه های Vue.js قابل استفاده مجدد هستند.

مستندات ساده، کامل و دقیق

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

DOM مجازی

Vue.js از DOM مجازی مشابه سایر چارچوب های موجود مانند ReactJS، Ember و غیره استفاده می کند. DOM مجازی یک نمایش درختی در حافظه سبک وزن از DOM اصلی HTML است و بدون تأثیر بر DOM اولیه به روز می شود.

ارتباط دو طرفه

Vue.js ارتباط دو طرفه ای را با معماری Model View Model (MVVM) خود فراهم می کند که مدیریت بلوک های HTML را ساده می کند.

رندر اعلامی Vue.js

این فریم ورک دارای سیستمی است که به ما اجازه می‌دهد تا با استفاده از نحو مدل ساده و سرراست، داده‌ها را به صورت اعلامی به DOM ارائه کنیم.

به عنوان مثال:

<body>
<div id="app">  
  {{ message }}  
</div>

<script>
var app = new Vue({  
  el: '#app',  
  data: {  
    message: 'This is a simple Vue.js Declarative Rendering example!'  
  }  
})  
</script>
</body>

چارچوب Vue.js به ما این امکان را می دهد defiویژگی‌های nire HTML به نام دستورالعمل‌ها، که برای ارائه عملکرد به برنامه‌های HTML استفاده می‌شوند.

دو نوع دستورالعمل در Vue.js وجود دارد:

دستورالعمل های یکپارچه e
بخشنامه ها defiتوسط کاربر مشخص شده است.

Vue.js از پرانتزهای دوتایی {{}} به‌عنوان مکان‌نما برای داده‌ها استفاده می‌کند، و دستورالعمل‌های Vue.js ویژگی‌های HTML هستند که از پیشوند v- استفاده می‌کنند.

یک برنامه Vue به یک عنصر DOM متصل می شود و آن را به طور کامل کنترل می کند. در مثال بالا، #app است.

با Vue می توانیم HTML را به عنوان نقطه ورود در نظر بگیریم، و هر چیز دیگری در داخل نمونه Vue ایجاد شده اتفاق می افتد.
بیایید مثالی را ببینیم که در آن اتصال عنصر و ویژگی را امتحان می کنیم:

<html>  
    <head>  
        <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>         
        <div id="app-2">  
        <span v-bind:title="message">  
            Hover mouse over me for a few seconds  
            and see a dynamically bound title which I have set!  
        </span>  
        </div>          
        <script>
           var app2 = new Vue({  
           el: '#app-2',  
           data: {  
           message: 'You loaded this page on ' + new Date().toLocaleString()  
                 }  
           })  
       </script>  
    </body>  
</html>

در این مورد، ویژگی جدید v-bind دستور است. دستورالعمل ها با پیشوند v- برای نشان دادن اینکه آنها ویژگی های منحصر به فردی هستند که توسط Vue ارائه شده اند، استفاده می شوند و برای اعمال رفتار واکنشی ویژه در DOM رندر شده استفاده می شوند.

نتیجه مثال به صورت زیر است