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

<template>
  <div class="car">
    <h3>Name: {{ carName }} \ {{reverseName}}</h3>
    <p>Year: {{ carYear }}</p>
    <button @click="changeName">Нэрийг өөрчлөх</button>
  </div>
</template>

<script>
  export default {
    props: {
      carName: {
        type: String,
        default: 'Нэр байхгүй'
      }, 
      carYear: Number
    },
    methods: {
      changeName() {
        this.carName = 'Prius'
      }
    },
    computed: {
      reverseName() {
        return this.carName.split('').reverse().join('')
      }
    }
  }
</script>

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

Төслийн 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

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

Сервертэй ажиллах vue-resource хэрэгслийн зарим нэгэн параметрүүдийг глобалаар тохируулахыг авч үзье. Өмнөх хичээлүүдэд $resource системийн аргад серверт хандах http://localhost:3000/cars хаягийг мөр хэлбэрээр дамжуулан resource обьектыг буцаан авч байсан. Програмын backend сервер ихэнхдээ нэг сервер буюу машинд байрлан өгөгдлийн санд хандах суурь хаяг тогтмол байдаг.

Хичээлээр ES6 -гийн кодыг ES5 кодоор компиляц хийх талаар авч үзье. Юуны түрүүнд үүнийг ямар учраас хийх хэрэгтэй вэ? гэдгийг тайлбарлая. ES бол EcmaScript -ийн хураангуйлсан бичлэг бөгөөд 6 нь Javascript -ийн хувилбарын дугаар. ES6 гараад удаагүй байгаа ч түүнийг олон хөтөчүүд дэмжин ажилладаг болоод байгаа. Жишээ нь Chrome хөтөч ES6 дээр бичигдсэн кодыг шууд ажиллуулна. Гэвч олон хэрэглэгчид ES6 -г шууд дэмждэггүй хуучин хөтөчүүдийг жишээ нь Internet Explorer, Firefox -ийн хуучин хувилбарыг хэрэглэсээр байгаа. Харин эдгээр хуучин хөтөчүүд ES5 -ийг бүрэн дэмжин ажилладаг тул програмыг бүх хэрэглэгчид ямар нэгэн асуудалгүйгээр ашиглах боломжийг бүрдүүлэх зорилгоор ES6 -гийн кодыг ES5 кодоор компиляц хийх хэрэгцээ бий.