انواع سلکتورها در CSS3
مهر 25, 1399
مسیر برنامه نویسی سمت کلاینت
مهر 25, 1399
نمایش همه

Vue.js چیست؟

این کتابخانه توسط Evan You ساخته شده و اولین انتشار آن در سال 2014 بوده است. Vue.js متن باز است، در برنامه نویسی سمت کاربر به کار برده می شود و برای استفاده در مرورگرهای مختلف بسیار مناسب است. این کتابخانه حجم کم و انعطاف پذیری بالایی دارد. یادگیری آن آسان است و به همین خاطر مورد توجه بسیاری از برنامه نویسان قرار گرفته است. از ویژگی های این کتابخانه میتوان به موارد زیر اشاره کرد که در ادامه به توضیح مختصر آن ها می پردازیم.

  • Components
  • Templates
  • Computed و Methods

Components

Component ها المان های HTML را به کدهای قابل استفاده مجدد تبدیل می کنند. در واقع Component هایی که در Vue ایجاد می کنیم به نوعی Custom Elements هستند.در زیر قطعه کدی را که میبینید یک کامپوننت است. برای اجری کد میتوانید اینجا کلیک کنید.

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

Templates

Template ها از ویژگی های دیگر Vue.js هستند که در واقع یک HTML معتبری می باشند که توسط مرورگرها میتوانند نمایش داده شوند. از ویژگی های دیگر آن ها Data Binding است که این ویژگی مقدار دادن به خصیصه های HTML، تغییر استایل ها را در صفحه راحت تر می کنند. همچنین می توان با استفاده از v-bind کلاس به یک المان اختصاص داد. در زیر میتوانید نمونه ای از یک Template را ببینید.

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

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

Computed و Methods

در ویژگی Methods شما میتوانید توابع مدنظرتان را تعریف کنید و زمانی که در یک قرار است رخداد یا همان Event اتفاق بیافتد تابه مورد نظر خود را صدا بزنید.

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

در مثال زیر نمونه ای از استفاده از متد را می بینید. برای دیدن نتیجه کد و اطلاعات بیشتر اینجا کلیک کنید.

<div id="example-2">
  <!-- `greet` is the name of a method defined below -->
  <button v-on:click="greet">Greet</button>
</div>
----------------------------------------------------------------------------------------
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    greet: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// you can invoke methods in JavaScript too
example2.greet() // => 'Hello Vue.js!'

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *