Өмнөх хичээлүүдийн кодод директивүүдийг ашиглаж байсан ч тэдгээрийг Vue фреймворкийн тодорхой хэрэгсэл байдлаар ойлгон хэрэглэж ирсэн. Одоо директивүүдийн талаар дэлгэрүүлэн судлаж ойлголтоо гүнзгийрүүлэх цаг болсон. Директив гэдэг нь html шаблоны дотор ашиглан хуудасны элементүүдтэй харьцан ажиллах боломжийг өгдөг тусгай атрибут юм. Өмнөх хичээлүүдэд бид v-on, v-bind гэх мэтийн директивүүдийг их олон ашигласан. Энэ хичээлээр бид өөрсдийн директивийг үүсгэн ашиглаж сурцгаах болно. Хичээлд ашиглах төсөл доорх код бүхий

<template>
  <div>
      <h2>{{ title }}</h2>  
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue!"
    }
  }
}
</script>

<style scoped>

</style>

нэг App.vue компонентоос бүрдэнэ.

JavaScript бол обьект хандлагатай хэл. Нөхцөл ба циклийн үйлдлүүд гээд хэлний үндсэн бүтцээс бусад бараг бүх боломжууд ямар нэгэн байдлаар обьектыг ашиглан хийгдэнэ. Зарим нэгэн тодорхой шийдлүүдийг жишээ нь HTML, XML гэх мэтийн хуудасны боловсруулалтыг хуудасны обьектын моделыг шууд ашиглах замаар хийдэг бол зарим зорилгод жишээ нь ердийн мөрийн өгөгдлүүдийг String обьектыг ашиглах гэх мэтээр. Обьект энэ бол өгөгдлийн хүнд төрөл. Гэсэн хэдий ч энэ ойлголтыг сайн ойлгохгүйгээр Javascript -ын хүч чадлыг гаргах боломжгүй. Энэ хичээлээр бид JavaScript -ын өгөгдлийн төрлийн нэг болох хэрэглэгчийн обьектын талаар авч үзнэ.

RxJs сангийн хүрээнд буфер гэж юу болох талаар энэ хичээлээр авч үзье. Буфер гэдгийг утгуудыг түр зуур хадгалах сав буюу орон зайг гэж ойлгоорой.

buffer, bufferTime арга

Практик жишээгээр ухагдхууныг ойлгох нь амархан байдаг учраас шууд

Rx.Observable.interval(500)
    .buffer(Rx.Observable.interval(2000))
    .take(3)
    .subscribe(createSubscribe('buffer'));

кодыг авч үзье. Хөтөч дээр хуудсаа нээвэл консолд

үр дүнг үзүүлнэ. Код юу хийж байгааг авч үзье.

useMemo хукийн судалгааг

import React, {useState} from 'react'

function App() {
  const [number, setNumber] = useState(40)
  
  return (
      <div className="container">
        <h1>Тооцоологдох шинж: {number}</h1>
        <button className={'btn btn-success mx-3'} onClick={() => setNumber(prev => prev + 1)}>Нэмэх</button>
        <button className={'btn btn-danger'} onClick={() => setNumber(prev => prev - 1)}>Хасах</button>
      </div>
  );
}

export default App;

код дээр харцгаая. useState -ээр 40 гэсэн анхны утгатай number хувьсагчийг үүсгээд хуудаст h1 гарчигаар number хувьсагчийн утгыг харуулаад Нэмэх, Хасах хоёр товч дээр дарахад setNumber функцээр number хувьсагчийн утгыг өөрчилнө. Кодийг ажлуулбал

хуудас нээгдэнэ.