آموزش Vue.js

آموزش Vue.js – جلسه اول: راه اندازی و شروع کار با Vue.js

vue.js چیست؟‌ و به چه دردی میخورد ؟

آموزش Vue.js رو با جواب دادن به سوالهای بالا شروع می کنیم:

Vue.js یک چارچوب یا فریمورک (به انگلیسی: framework) جاوا اسکریپته. و ازش برای انجام کارهای باحال در رابط کاربری سایت ها استفاده میشه. چه کارهایی؟ خب خیلی کارها! در طول این دوره آموزش Vue.js در جاوا فارسی، تعداد زیادی از نمونه های خوب و بدردبخور پروژه های Vue.js رو خواهید دید.

در کل همون کارهایی که با جاوااسکریپت و jQuery انجام می دادیم رو، با ویو جی اس انجام میدیم. منتها آسون تر و باحال تر و خفن تر!

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

برای خوندن داکیومنت های ویو جی اس به زبان انگلیسی هم میتونید از سایت اصلی ویو جی اس استفاده کنید.

پیش نیاز شروع آموزش Vue.js چیست؟

خب Vue.js بر مبنای جاوااسکریپته. و به طور خاص، بر مبنای EcmaScript5 نوشته شده. (اگر نمی دونید EcmaScript چیه، حتماً ۳ دقیقه وقت بذارید و مقاله تاریخچه جاوااسکریپت رو بخونید)

پس اگر میخواید آموزش Vue.js رو شروع کنید، حتماً‌ باید جاوااسکریپت رو بلد باشید.

اگر جاوااسکریپت بلد نیستید، میتونید آموزش جاوا اسکریپت رو از اینجا شروع کنید.

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

Vue.js در دو نسخه ارائه میشه: نسخه دولوپ (به انگلیسی: Developement Version) و نسخه انتشار(به انگلیسی: Production Version).

چه زمانی از نسخه Developement ویو جی اس استفاده کنیم؟

نسخه Developement ویو جی اس، از اسمش معلومه یه چیزایی. یعنی مال وقتیه که دارید پروژه رو دولوپ می کنید. خاصیتش اینه که warning ها و لاگ های کنسول رو به صورت کامل داره. و کیست که نداند در حین پیاده سازی،‌لاگ و warning و ارورها چقدر به برنامه نویس کمک میکنه که خرابکاریهاش رو درست کنه!

برای انجام تمرین های دوره آموزش Vue.js جاوا فارسی،‌ از نسخه Developement استفاده می کنیم.

چه زمانی از نسخه Production ویو جی اس استفاده کنیم؟

بعد از اینکه پروژه خوشگلتون رو با استفاده از نسخه Developement ایجاد کردید و عیب و ایرادهاش رو برطرف کردید.

یعنی زمانی که پروژه تون تموم شد، میاید و نسخه Vue.js اش رو عوض می کنید و نسخه Production رو میذارید.

خاصیتش اینه که حجمش کمتره و سریعتر لود میشه. همین!

از کجا Vue.js رو دانلود کنیم؟

اول از همه بگم که حتماً لازم نیست که دانلودش کنید! میتونید Vue.js رو بدون دانلود کردن هم به پروژه تون اضافه کنید. (استفاده از cdn)

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

اما خیلی جاها (مثل پروژه های اینترانت) موقع اجرایشان، دسترسی به وب وجود ندارد. یا بعضی از کشورها (مثل کره شمالی و سودان) ممکنه بعضی اوقات بخاطر مسائل سیاسی تحریم بشن و دسترسی شون قطع بشه. یا بعضی کشورها (مثل جمهوری کنگو) ممکنه خودشون لطف کنن و دسترسی کاربراشون رو ببندن! در جریانید دیگه؟

به همین دلایل احتمال داره شما لازم داشته باشید که سورس فریمورک Vue.js رو دانلود کنید و به پروژه تون اضافه کنید.

دانلود Vue.js نسخه Production

دانلود Vue.js نسخه Developement

چجوری Vue.js رو به پروژه اضافه کنیم؟

حالت اول: اضافه کردن Vue.js به پروژه از طریق cdn

برای اینکه بدون نیاز به دانلود، Vue.jsرو به پروژه خودتون اضافه کنید، یکی از تگ های اسکریپت زیر رو داخل سورس پروژه تون قرار بدین: (داخل تگ head)

اضافه کردن Vue.js نسخه Developement

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

اضافه کردن Vue.js نسخه Production

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

حالت دوم: اضافه کردن Vue.js به پروژه از طریق افزودن فایل

برای این کار، فایل با پسوند js. که در مرحله قبل دانلود کردید رو توی فولدر پروژه کپی کنید. ما معمولا یه فولدر scripts یا همچین چیزی میسازیم و فایل js. رو داخل اون کپی می کنیم. البته این کار ضروری نیست. ولی برای منظم شدن پروژه توصیه میشه.

وقتی فایل js. رو داخل فولدر پروژه تون کپی کردید، آدرسش رو توی یه تگ script بنویسید و تگ رو به صفحه html سایتتون اضافه کنید. (تگ script روتوی تگ head بذاریدش)

اضافه کردن Vue.js نسخه Developement

<script src="scripts/vue.js"></script>

اضافه کردن Vue.js نسخه Production

<script src="scripts/vue.min.js"></script>

در ادامه، آموزش Vue.js رو با چندتا مثال ساده پیش می بریم و میریم جلو 🙂

چند تا مثال ساده از کارکرد Vue.js

این چند مثال رو برای این آوردم که برید اجراشون کنید و ببینید که Vue.jsچجوری کار میکنه. بنابراین اگر هر کدوم از اجزای کد اسکریپت رو متوجه نشدین، نگران نباشین. قراره اینارو در جلسه های بعدی آموزش Vue.js به صورت کامل براتون توضیح بدم.

مثال اول: تغییر مقدار المنت html با کلیک بر روی دکمه

توی این مثال، ما یه تگ div ساختیم و یه دکمه. یه متن پیشفرض رو با استفاده از Vue ریختیم توی تگ div. و با Vue.js کاری می کنیم که با کلیک بر روی دکمه، متن داخل تگ div عوض بشه.

شما حتماً فایل html ایجاد کنید. و داخل اون فایل کد های زیر رو وارد کنید. بعد فایل html رو بوسیله یه مرورگر اجرا کنید تا بتونید نتیجه رو ببینید:

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<h2>جاوا فارسی Vue.js آموزش</h2>

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

<p>
<button onclick="myFunction()">کلیک کنید</button>
</p>

<script>
var myObject = new Vue({
  el: '#app',
  data: {message: 'سلام و عرض ادب'}
})

function myFunction() {
    myObject.message = "خدمت شما دوستان عزیز";
}
</script>

</body>
</html>

با اجرای کد بالا، یک عنوان، یک متن و یک دکمه به شما نمایش داده میشود:

آموزش Vue.js

حالا با کلیک بر روی دکمه، میبایست متن عوض شده و متن دوم برای شما به نمایش در بیاید:

vue.js first code

مثال دوم: نمایش همزمان در هنگام تایپ

در این مثال، ما یدونه input از نوع textbox گذاشتیم ، و یدونه تگ p . با استفاده از Vue.js هرچی توی این textbox بنویسیم، به صورت همزمان توی p نوشته میشه!

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<h2>جاوا فارسی Vue.js آموزش</h2>

<div id="app">
  <p>{{ message }}</p>
  <p><input type="text" v-model="message"></p>
</div>

<script>
myObject = new Vue({
  el: '#app',
  data: {message: 'سلام بر شما '}
})
</script>

</body>
</html>

این کد رو هم توی یه صفحه html بنویسید و اجراش کنید. بعد توی textbox شروع کنید به تایپ کردن و ببینید که همزمان چه اتفاقی داره میفته!

تمرین و سخن پایانی این جلسه

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

دوتا مثال بامزه و ساده هم براتون زدم که با کلیت قضیه آشنا بشید.این مثالها رو در جلسه های بعدی (هر کدوم رو در درس مربوط به خودش) کامل براتون توضیح میدم. الان سعی کنید ابتکار بزنید و این دوتا مثال رو خودتون تغییر بدین و چیزهای جالب تری باهاشون بسازین. اینجوری طرز کار place holder ها و دایرکتیو های Vue.js رو بیشتر یاد می گیرین.

برچسب ها

حامد عسکریان

برنامه نویس و عاشق تکنولوژی

دیدگاهتان را بنویسید

دکمه بازگشت به بالا
بستن
بستن