Төслийн Car компонентийг Stateful буюу Component классаас удамшсан класс байдлаар тодорхойлсноор react компонентийн амьдралын циклүүдэд хандах боломжийг авсан. Car компонентод дээр компонентийн төлвийн өөрчлөлтүүдийн циклүүдийг харцгаая. Үүний тулд Car компонентийн кодийг

class Car extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {
    console.log('Car shouldComponentUpdate', nextProps, nextState)
    return true
  }

  componentDidUpdate() {
    console.log('Car componentDidUpdate')
  }

  render() {
    console.log('Car render')
    const inputClasses = [styles.input]

    ...

    return (
      <div className={styles.Car} style={style}>
        <h3>Машиний нэр: {this.props.name}</h3>
        <p>Он: <strong>{this.props.year}</strong></p>
        <input
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(' ')}
        />
        <button className={styles.btn} onClick={this.props.onDelete}>Устгах</button>
      </div>
    )
  }
}

export default Car

гэж өөрчилье.

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

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

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

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

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

Хичээлээр компонент хоорондын харилцан ажиллагааны бас нэгэн аргыг авч үзье. Доод шатны /хүүхэд/ компонентоос параметр дамжуулах хичээлд бид хүүхэд компонентод үйл явц үүсгээд түүнийг эцэг компонентод сонсохыг сурсан. Өөрөөр хэлбэл эцэг компонентод тодорхойлогдсон талбарын утгыг хүүхэд компонентоос өөрчилсөн. Үүнийг хийх бас нэгэн арга бий. Жишээ нь App компонентод

<script>
import Car from './components/Car.vue'

export default {
  data () {
    return {
      carName: 'Toyota',
      carYear: 2018
    }
  },
  methods: {
    changeCarName() {
      this.carName = 'Benz'
    }
  },
  components: {
    appCar: Car
  }
}
</script>

Сорилго явуулах төслийн үндсэн хуудсны компонентийг Нүүр хуудас зохиох хичээлд зохиохдоо түүнд локал төлвийг үүсгэн өгсөн. Сорилго нэг эсхүл олон тооны асуултуудыг агуулж байх боломжтой учраас төлвийн массивийн сонгогдсон буюу тухайн үеийн элементүүдийг үзүүлэх компонентийг төслийн components хавтаст үүсгэе. Үүний тулд components хавтаст ActiveQuiz нэртэй хавтас үүсгээд түүнд компонентийн ActiveQuiz.js болон хэвжүүлэлтийн ActiveQuiz.module.js файлуудыг үүсгэн өгөөрэй.