آموزش vuejs

اصول آموزش vuejs

تاریخ : جمعه 19 مهر 1398

چرا Vue.js؟

Vue (تلفظ / vjuː / ، مانند view) یک فریمورک پیشرفته برای ساخت رابط های کاربر است. برخلاف سایر فریمورک های یکپارچه ، Vue از پایه طراحی شده تا از نظر تدریجی قابل قبول باشد. کتابخانه اصلی فقط بر روی لایه view متمرکز شده است ، و انتخاب و ادغام آن با کتابخانه های دیگر یا پروژه های موجود آسان است. از طرف دیگر ، Vue همچنین قادر است در هنگام استفاده از کتابخانه های نوین و پشتیبانی از کتابخانه ها ، از برنامه های تک صفحه ای پیشرفته استفاده کند.


شروع

ساده ترین راه برای امتحان کردن Vue.js استفاده از مثال سلام جهانی JSFiddle است. می توانید یک فایل index.html ایجاد کنید و Vue را با آن شامل کنید:

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

یا :

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

صفحه Installation گزینه های بیشتری را برای نصب Vue ارائه می دهد. توجه: ما توصیه نمی کنیم که مبتدیان از vue-cli شروع کنند ، به خصوص اگر هنوز با ابزارهای ساخت مبتنی بر Node.js آشنا نیستید.


اعلان رندرینگ (Declarative Rendering)

در هسته Vue.js سیستمی است که به ما امکان می دهد تا با استفاده از نحو الگوی ساده ، داده ها را به DOM ارائه دهیم:

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
{{ message }}

ما اولین برنامه Vue را ایجاد کرده ایم! به نظر می رسد بسیار شبیه به رندر الگوی رشته ای است ، اما Vue کارهای زیادی را در در پس زمینه انجام داده است. داده ها و DOM اکنون مرتبط شده اند ، و اکنون همه چیز واکنشی است. چگونه می دانیم؟ کنسول جاوا اسکریپت مرورگر خود را باز کنید (همین حالا) و app.message را به مقدار دیگری تنظیم کنید. بر این اساس باید مثال ارائه شده در بالا را به روز کنید.

علاوه بر جاگذاری متن ، ما همچنین می توانیم ویژگی های عناصر مانند زیر را به هم پیوند دهیم:

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})
Hover your mouse over me for a few seconds to see my dynamically bound title!

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

اگر کنسول جاوا اسکریپت خود را دوباره باز کنید و app2.message = 'some new message' را وارد کنید ، یک بار دیگر خواهید دید که در HTML محدود - در این مورد ویژگی title - به روز شده است.


شرط ها و حلقه ها (Conditionals and Loops)

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
Now you see me

در کنسول app3.seen = false را وارد کنید. می بینید که پیام از بین می رود.

این مثال نشان می دهد که ما می توانیم داده ها را نه تنها به متن و ویژگی ها ، بلکه به ساختار DOM متصل کنیم. علاوه بر این ، Vue همچنین یک سیستم اثر گذار قدرتمند را فراهم می کند که می تواند هنگام inserted/updated/removed عناصر توسط Vue ، اثرات انتقال را بطور خودکار اعمال کند.

چند دستورالعمل دیگر نیز وجود دارد که هر کدام عملکرد ویژه خود را دارند. به عنوان مثال ، دایرکتیو v-for می تواند برای نمایش لیستی از موارد با استفاده از داده های یک Array استفاده شود:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})
  1. {{ todo.text }}

در کنسول ، app4.todos.push({ text: 'New item' }) را وارد کنید. شما باید مورد جدید اضافه شده ای را در لیست ببینید.


کار با ورودی کاربران (Handling User Input)

برای اینکه کاربران بتوانند با برنامه شما ارتباط برقرار کنند ، می توانیم از دایرکتیو v-on برای پیوستن به شنوندگان رویداد که در نمونه های Vue از متدها استفاده می کنند استفاده کنیم:


<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

{{ message }}

توجه داشته باشید که در این روش وضعیت برنامه خود را بدون دست زدن به DOM به روز می کنیم - کلیه دستکاری های DOM توسط Vue انجام می شود و کدی که می نویسید بر روی منطق اساسی متمرکز است.

Vue همچنین دایرکتیو v-model را ارائه می دهد که باعث می شود اتصال دو طرفه بین ورودی فرم و حالت برنامه برقرار شود:

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

{{ message }}


ترکیب با کامپوننت ها (Composing with Components)

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

ساختار app

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

// Define a new component called todo-item
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

var app = new Vue(...)

اکنون می توانید آن را در الگوی کامپوننت دیگر تنظیم کنید:

<ol>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ol>

اما این متن مشابه را برای هر یک از todo ارائه می دهد ، که اصلا جالب نیست. ما باید بتوانیم داده ها را از دامنه والدین به اجزای کودک منتقل کنیم. بیایید کامپوننت را با prop تغییر دهیم:

Vue.component('todo-item', {
  // The todo-item component now accepts a
  // "prop", which is like a custom attribute.
  // This prop is called todo.
  props: ['todo'],
  template: '
  • {{ todo.text }}
  • ' })

    اکنون می توانیم todo را به هر کامپوننت تکراری دیگر با استفاده از v-bind منتقل نماییم:

    <div id="app-7">
      <ol>
        <!--
          Now we provide each todo-item with the todo object
          it's representing, so that its content can be dynamic.
          We also need to provide each component with a "key",
          which will be explained later.
        -->
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id"
        ></todo-item>
      </ol>
    </div>
    
    Vue.component('todo-item', {
      props: ['todo'],
      template: '
  • {{ todo.text }}
  • ' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } })

    این یک مثال معقول است ، ما موفق شده ایم که برنامه خود را به دو واحد کوچکتر جدا کنیم و کودک به طور منطقی از والدین با استفاده از props جدا شده است. اکنون می توانیم مؤلفه <todo-item> خود را با الگوی و منطق پیچیده تری بهبود بخشیم بدون اینکه روی برنامه والدین تأثیر بگذارد.

    در یک برنامه بزرگ ، لازم است کل برنامه را به اجزای کوچکتر تقسیم کنید تا توسعه برنامه قابل مدیریت باشد. ما بعداً در راهنمای بیشتر در مورد مؤلفه ها صحبت خواهیم کرد ، اما یک مثال (تخیلی) که قالب یک برنامه ممکن است با اجزای کامپوننت چگونه باشد:

    <div id="app">
      <app-nav></app-nav>
      <app-view>
        <app-sidebar></app-sidebar>
        <app-content></app-content>
      </app-view>
    </div>
    

    منابع مورد مطالعه جهت جمع آوری این مطلب:
    https://vuejs.org/v2/guide/index.html


    نظرات