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

Хичээлээр Vuejs -ийг ашиглан энгийн програмыг зохиоё. Үүний тулд Vuejs -ийн албан ёсны сайтад хандан GET STARTED цэсээр ороод хуудасны зүүн талын цэсээс Installation цэсийг сонговол

Vuejs -ийг суулгах аргуудын талаар дэлгэрэнгүй тайлбарласан хуудас нээгдэнэ. Vuejs бага хэмжээтэй энгийн фреймворк учраас түүнтэй ажиллахын тулд олон тооны тохиргоонууд хийн ажиллах орчинг бүрдүүлээд байх хэрэггүй кодод javascript санг оруулдагийн адилаар нэг script тэг ашиглан Vuejs -ийг оруулаад түүнийг ашиглах боломжтой. Vuejs -ийг ашиглах хамгийн энгийн ойлгомжтой арга бол CDN -ээс санг script тэгээр коддоо оруулан ирэх юм. Бид фреймворкийн ажиллагааг судлах гэж байгаа тул <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> мөрийг хуулан аваад дурын текст засварлагчийг нээгээд index.html файлыг доорх агуулгатайгаар

үүсгэн өгье.

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

Хичээлээр сорилгын үр дүнгийн хэсгийн боловсруулалтыг хийцгээе. Одоогоор сорилгын асуултууд дуусахад бид консолд Finished текстийг үзүүлж байгааг өөрчлөхийн тулд Quiz компонентод false анхдагч утгатай isFinished төлвийг

const [isFinished, setIsFinished] = useState(false)

нэмэн өгөөд onAnswerClickHandler аргаас сорилго дуусанг шалгах isQuizFinished функцээс true утга буцаавал Finished текстийг үзүүлж байсныг

        if (isQuizFinished()) {
          setIsFinished(true)
        } else {
          ...
        }

гэж өөрчилье. Өөрөөр хэлбэл сорилго дуусан isQuizFinished функцээс true утга буцаавал setIsFinished функцээр isFinished төлвийг true утгатай болгоно.