Интернетэд сууриласан програмчлал хөгжихийн хирээр хэрэглэгчдийн шаардлага улам өндөр болсон. Хөтөч сервер хооронд хуудсыг дамжуулан дахин зурах, формын шалгалт, хуудас шилжилт зэрэг серверт олон удаа хандах ажиллагаануудад хэрэглэгчид нилээд дургүй байдаг. Эдгээр асуудлыг шийдэхийн тулд SPA буюу нэг хуудаст програмын технологийг Angular, React, Vue зэрэг фреймворкууд хэрэгжүүлдэг. Фреймворкуудийн ажиллагааны зарчим ойролцоо тул аль нэгийг нь судалсан байхад бусад нь ойлгомжтой. Иймээс сайтад Vue фреймворкийн хичээлүүдийг оруулж байгаа билээ.

Энэ удаад Html хуудас дээрх сонголтуудаас тохирохыг нь зөвлөх тэмдэглэгээ хийдэг CheckBox гэж нэрлэдэг элементийн тухай авч үзье. Жишээ нь бүртгэлийн хуудаст хэрэглэгчийн сонирхдог зүйлсийг тодорхой төрлүүдээс сонгох байдлаар ихээр авдаг. Үүнийг VueJs -дээр хэрхэн хэрэгжүүлэхийг

<template>
  <div>
    <h2>Form inputs</h2> 
    <label>
      <input type="checkbox"> instagram
    </label>
    <label>
      <input type="checkbox"> twitter
    </label>    
    <label>
      <input type="checkbox"> facebook
    </label>    
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

жишээгээр харцгаая.

React компонентоос хэд хэдэн элементүүдийг буцаах нь ердийн үзэгдэл ч тэдгээрийг заавал нэг суурь элементэд багцалсан байх дүрэмтэй. Энэ дүрэм нь зарим тохиолдолд DOM -д илүү зангилаа /элемент/ үүсгэдэг асуудлыг React 16 хувилбараас фрагментээр солин шийдвэрлэсэн. Фрагмент гэдгийг ойлгохын тулд төслийн кодод багахан өөрчлөлтийг хийе. ErrorBoundary классийн ажиллагааг шалгах зорилгоор Car компонентод нэмэн өгсөн

     if (this.props.name === 'Toyata Prius') {
       throw new Error('Алдаа гарлаа !!!')
     }

кодийг хасвал програм TOGGLE CAR товч дээр дарахад алдаа хаялгүй хэвийн ажиллана.

Програмчлалын аль ч хэл дээр програм боловсруулахдаа тодорхой сан, хэрэгслүүдийг ашиглахгүйгээр хийнэ гэсэн ойлголт байхгүй. Javascript хэлний боломжийг илүү үр дүнтэй ашиглах үндсэн арга бол javascript фреймворкийг судлан суралцах явдал. Иймээс сайтад Vuejs фреймворкийн хичээлүүдийг багц болгон нийтэлж байгаатай танилцаарай. Энэ удаад директивт аргумент дамжуулан ашиглахыг авч үзье. Аргумент гэдгийг юу гэж ойлгох вэ? Үүнийг өмнөх хичээлүүдэд ашиглаж сурсан директивийн жишээнээс харцгаая. Жишээ нь бид товч дээр даралт хийх үйл явцын сонсогчийг

<button @click="title = 'New title'">Change title</button>

гэж тавин өгдөг. @ тэмдэгт бол v-on: бичлэгийн хураангуй бичилт гэдгийг сануулъя. Иймээс @click гэдгийг v-on:click гэж бичиж болно. Бичлэгийн тодорхойлох цэгийн араас өгөгдсөн (манай тохиоллдолд click) зүйлийг аргумент гэж нэрлэдэг бөгөөд энэ нь директивт дамжигдан очдог.

React компонентод тулгуурласан тул програмийн бүх элементүүд компонентуудын харьцаа байдаг тул компонентод параметр дамжуулан удирдах зайлшгүй шаардлага гарч ирнэ. Энэ тухай Компонент гэж юу болох хичээлээр өнгөцхөн үзсэн бөгөөд энэ хичээлээр сэдвийг илүү гүнзгийрүүлэн авч үзье.