مثالی قوی‌تر و نصب محلی Vue

Harder Example and Local Vue Installation

در جلسه قبل مثال ساده ای از یک برنامه VueJS را خدمت شما ارائه کردیم که کدهای آن در لینک زیر قابل دسترسی است:

این مثال یک پاراگراف ساده <p> بود که متن خود را از خصوصیت Data در Vue می گرفت. در این جلسه ابتدا این مثال را کمی پیشرفته تر می کنیم تا داده های کاربر را نیز دریافت کند و در آخر نحوه راه اندازی Vue به صورت محلی و روی سیستم خودتان را آموزش خواهم داد.

همانطور که گفتم می خواهم داده ها را از سمت کاربر دریافت کنم بنابراین یک input را به کدهای HTML خودم اضافه خواهم کرد:

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

<div id="app">
  <input type="text" v-on:input="changeTitle">
  <p>{{ title }}</p>
</div>

دستور v-on در فریم ورک Vue یک directive (به معنای «دستور») است که معادل event-listener ها در جاوا اسکریپت عادی است. زمانی که v-on را برای عنصری در HTML مشخص می کنیم به Vue می گوییم این فیلد را زیر نظر بگیر. حالا باید یک argument (آرگومان) را به این Directive بدهیم. این کار با علامت دو نقطه و سپس نام آن آرگومان انجام می شود. آرگومان ما همان event ای است که باید به آن گوش بدهیم. input که در کد بالا می بینید یک Event در فریم ورک Vue است و با فشردن هر کلید کیبورد اجرا می شود (تقریبا معادل keydown یا keyup). در نهایت باید کدهای مورد نظر خودمان را درون علامت های "" بنویسیم. من در اینجا نام یک متد را قرار داده ام (changeTitle) که البته هنوز وجود ندارد و باید آن را تعریف کنیم.

برای تعریف یک متد مانند data یک خصوصیت به نام methods داریم که یک شیء است. ما تمام متدهای مورد نظر خود در این قسمت را درون همین شیء می نویسیم:

new Vue({
	el: '#app',
  data: {
  	title: 'Hello World!'
  },
  methods: {
  	changeTitle: function(event) {
    	this.title = event.target.value;
    }
  }
});

همانطور که می بینید برای تعریف توابع باید دقیقا به شکل بالا عمل کنید. ابتدا نام تابع را مشخص می کنید که به سلیقه شما بستگی دارد (باید با نام مشخص شده در کدهای HTML یکی باشد). سپس با علامت دو نقطه کلمه function را می نویسیم و event را نیز به صورت خودکار دریافت می کنیم (دقیق مانند جاوا اسکریپت عادی). توجه داشته باشید که برای دسترسی به خصوصیت title از کد data.title استفاده نکرده ایم. چرا؟ به دلیل اینکه Vue تمام خصوصیت های موجود در data را به صورت خودکار به بالاترین سطح نمونه Vue می برد بنابراین همه آن ها به صورت this.property در دسترس ما خواهند بود. در نهایت گفته ام this.title باید برابر باشد با value موجود در Event ما که همان فیلد input است.

در حال حاضر اگر Ctrl + Enter را بزنیم کدهای ما در jsfiddle اجرا می شوند و شاهد input جدیدی خواهید بود. حالا هر مقداری را در این input تایپ کنید، درون تگ <p> قرار گرفته و نمایش داده می شود. شما می توانید کدهای آماده این جلسه را در لینک زیر مشاهده کنید:

https://jsfiddle.net/smax/c4mcxu7s/

مسیر این دوره آموزشی

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

در مرحله بعد وارد بحث نمونه (instance) کلاس Vue می شویم که هسته اصلی هر برنامه Vue است. ما در فصل مربوط به آن با lifecycle های آن و نحوه تعامل با آن آشنا خواهیم شد. در فصل بعدی آن با Vue CLI آشنا خواهیم شد که روش پیشرفته تر شروع پروژه های ما است. مبحث بعدی مربوط به کامپوننت ها است که چندین فصل طول خواهد کشید.

فصل بعدی ما مربوط به فرم ها است و نحوه تعامل با آن ها را یاد خواهیم گرفت. فصل بعد از آن نیز مربوط به directive ها و filter ها و mixin ها است. ما با تعاریف هر کدام از آن ها آشنا خواهیم شد و نحوه کار با هر کدام را یاد خواهیم گرفت. در فصل بعدی به سراغ انیمیشن ها و transition ها را بررسی می کنیم. حالا کار با درخواست های HTTP باقی می ماند که مبحث فصل بعدی ما خواهد بود (مسائلی مانند ذخیره داده در پایگاه داده و غیره).

فصل بعد از آن مربوط به نحوه کار با SPA ها یا Single Page Application ها با استفاده از Routing است. در نهایت آخرین فصل ما مربوط به state management خواهد بود که به وقت آن به سراغش خواهیم رفت. در همین فصل با مبحث deployment یا قرار دادن پروژه روی سرور صحبت خواهیم کرد تا بهترین روش ها را یاد بگیریم.

فایل های سورس کد

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

کدنویسی محلی

من در چند قسمت اول از دوره آموزش Vue رایگان با وب سایت jsfiddle کار خواهم کرد چرا که کدهای ما در این جلسات بسیار ساده خواهد بود اما اگر دوست دارید که کدهایتان را به صورت محلی بنویسید می توانید این کار را انجام بدهید و لزومی در استفاده از jsfiddle نیست. انجام این کار بسیار ساده است؛ شما باید به صفحه installation از وب سایت رسمی VueJS رفته و فایل توسعه Vue (حالت Development) را دانلود کنید. سپس مانند هر فایل جاوا اسکریپت دیگری با استفاده از تگ script آن را درون پروژه خودمان قرار می دهیم.

به طور مثال من یک پوشه به نام Vue ساخته ام و یک فایل به نام index.html را درون آن قرار داده ام (فایل Vue دانلود شده نیز در همین پوشه قرار می گیرد). محتوای این فایل برای تمرین این جلسه که در jsfiddle انجام دادیم، به شکل زیر است:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>VueJS</title>
    <link rel="stylesheet" href="">
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-on:input="changeTitle">
        <p>{{ title }}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                title: 'Hello World!'
            },
            methods: {
                changeTitle: function (event) {
                    this.title = event.target.value;
                }
            }
        });
    </script>
</body>

</html>

با باز کردن این فایل (index.html) در مرورگر خود می توانید نتیجه را مشاهده کنید. البته این یک روش بسیار ساده است برای اینکه شما در محیط محلی کدنویسی کنید و فعلا کارمان را راه می اندازد اما در فصل های بعدی محیط توسعه پیشرفته تری را راه اندازی خواهیم کرد.

این پایان فصل اول از این دوره آموزشی است.