vuex сан төслийн компонентуудын ажиллагаануудын хоорондын хамааралыг арилган бие даан ажиллах боломжийг бүрдүүлдэг. Getters -ийг ашиглах хичээлд vuex сангийн state, getters талбаруудыг ашиглан Counter , SecondCounter компонентуудыг бусад компонентуудаас хамааралгүйгээр ажилладаг болгосон. Counter , SecondCounter компонентууд одоо зөвхөн store -той харьцан ажиллах болсноор төслийн компонент хоорондын хамаарал багасан програмын ажиллагааны логик ойлгомжтой хөнгөн болохын дээр компонентуудыг дахин ашиглах боломж бүрдсэн.

Өмнөх хичээлүүдэд бид react -ийг нилээд сайн судлан энгийн төслийг үүсгэн ажлуулж сурсан. Одоо react компонентуудийн талаар цааш гүнзгийрүүлэн судлах цаг болсон. Хичээлээр Component классаас удамшсан класс хэлбэрээр үүсгэгдсэн компонентод параметр дамжуулахыг авч үзье. Үүнийг төслийн App компонент дээр харцгаая. App компонентийг index.js файлд

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM сангийн render аргаар DOM -д оруулан өгч байгаа.

Хичээлээр Vuejs фреймворкийн роутинг /чиглүүлэгч гэж орчуулж болох юм/ ойлголтын тухай авч үзье. Орчуулга муухан болсон байх талтай тул Routing гэсэн хэллэгээр нь шууд ойлгох нь илүү болов уу. Програмчлалын хэлний ухагдхуунуудыг шууд гадаад үгээр нь ойлгон тогтоох нь сайн. Учир нь монгол хэл дээр програмчлалтай холбоотой мэдээллүүд бага болохоор бид ихэнх зүйлийг интернетийн гадаад хэлтэй орчноос эсхүл гадаадын ном, хэвлэлээс судлах хэрэгтэй болдог. Vuejs фреймворкийн роутингийг ашиглахын тулд төслийн хуудас хоорондын чиглүүлэгчийг зохион байгуулдаг vue-router пакетыг төсөлдөө суулгах хэрэгтэй.

Хэрэглэгчтэй харьцах үндсэн элемент бол форм. Хөтөч дээр ажиллах програм зохиоход хэрэглэгч талын дэлгэцийг уян хатан, динамик ажиллагаатай болгоход javascript -гүйгээр төсөөлөхөд бэрх. Энэ хичээлээс html5 -ын хэрэглэгчтэй харилцах формын элементүүдтэй VueJs -ээр хэрхэн харьцахыг суралцаж эхлэнэ. Формд хамгийн ихээр хэрэглэдэг input элементийн ажиллагааг

<template>
  <div>
      <h2>Form inputs</h2> 
      <input type="text">
  </div>
</template>

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

жишээгээр авч үзье. Vue фреймворкийн үндсэн ойлголтууд багцын хичээлүүдийг эхнээс үзсэн бол дээрх кодыг төвөггүй ойлгоно. Аливаа зүйлийг энгийнээс эхлэн зөв ойлговол сурахад дөхөм байдаг тул багц хичээлүүдийг үзэхийг зөвлөе. Зарим хичээл төлбөртэй тул та тусгай эхртэй хэрэглэгч байх ёстойг анхаарна уу.

Жич: Үнэ төлөөд үзэх эсэх нь таны сонголт. Гэхдээ дараа болъё, үнэгүй хичээл олдоно гэх мэтээр хойшлуулах нь эргээд алдагдсан боломж болдог. Цаг хугацаа таныг хүлээхгүй. Хичээлүүдийг бэлтгэх явцад Vue фреймворкийн шинэ хувилбарууд гарч ирсэн хэдий ч ерөнхий зүйл хэвээрээ. Шинэ хувилбарт орсон өөрчлөлтийг хичээлийн материалд туршин шалгаад явах нь бүр ч илүү үр дүнтэйг сануулъя.