Интернетэд сууриласан хөтөч дээр ажилладаг програмуудыг боловсруулахад 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 фреймворкийн үндсэн ойлголтууд багцын хичээлүүдийг үзэхийг зөвлөе.

Формийн шалгалтын ажиллагаануудтай үргэлжлүүлэн танилцая. Валидаторийг тохируулах хичээлийн жишээнд $v обьектод байгаа email түлхүүртэй обьектийг дэлгэц дээр харуулан цахим шуудангийн хаягийн талбарт оруулж буй өгөгдлүүд шалгагчийн төлөвт хэрхэн нөлөөлж байгааг ажигласан. Бодит жишээнд {{ $v.email }} бүтцийг ашиглаад байх нь тохиромжгүй тул түүнийг шаблоны кодоос

<template>
  <div class="container">
    <form action="" class="pt-4">
      <div class="form-group">
        <label for="email">Email</label>
        <input 
          type="email" 
          id="email" 
          class="form-control"
          @blur="$v.email.$touch()"
          v-model="email"
        >
      </div>
    </form>
  </div>
</template>

хасаад хуудсаа хөтөч дээр нээвэл

ердийн формийг үзүүлнэ.

Компонентод Inline хэвжүүлэлт хийх нь javascript кодтой холилдон тийм аятайхан бус санагдаж байж болох. Кодлогчид css хэвжүүлэлтийг тусдаа файлд гаргаад хэрэгтэй файлдаа татан оруулан ашиглахыг ихэнхдээ илүүд үздэг. React -д хэвжүүлэлтийг тусдаа гарган ашиглах боломжтой бөгөөд үүний талаар хичээлд авч үзье.

Обьектыг үүсгэх

String обьект нь энгийн тэмдэгтийн төрөлд харгалзах хэлний дотоод обьект юм. Обьект мөрийг шалгах, хэсгийг таслан авах, том жижиг үсгэнд шилжүүлэх гээд олон тооны аргуудтай. Энэ хичээлээр бид String обьектын ихээр хэрэглэдэг аргуудын талаар авч үзэх болно. String() конструктур нь анхны утгыг заан өгөх заавал байх шаардлагагүй параметртэй. Обьектыг үүсгэх жишээнүүд

var s = new String();
var head1 = new String("JavaScript хичээлүүд");