Ямарч програмын ажиллагааны чухал хэсэг бол төрөл бүрийн мэдээллийн боловсруулалт, тэдгээртэй ажиллахтай холбоотой байдаг. Иймээс энэ хичээлээс vuejs дээр төрөл бүрийн өгөгдлүүдтэй хэрхэн үр дүнтэй харьцах аргуудыг судлаж эхлэнэ. Үүнийг бид маш энгийн

жишээгээр үзнэ.

Програм ямар нэгэн алдаагүй зөв ажиллаж байх хэрэгтэйг бүгд мэднэ. Харин програм зохиогч өөрийн кодийг хурдтай ажилладаг, зохион байгуулалт сайтай, ойлгомжтой байлгахыг байнга эрмэлзэх ёстой. Програм зохиогч бүр програм боловсруулалтын DRY /do not repeat yourself/ дүрмийг ягштал биелүүлэн хэвшил болгосон байх хэрэгтэй. Хичээлээр Vue -гийн програмын ажиллагааг хэрхэн оновчтой /оптимизаци/ болгохыг доорх жишээгээр

        <div id="app">
            <h2>Тоолуур {{ counter}} </h2>
            <h3>{{ condition }}</h3>
            <button @click="add">Нэмэх</button>
            <button @click="sub">Хасах</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    counter: 0,
                    condition: 'Тоолуур 3-аас бага'
                },
                methods: {
                    add: function() {
                        this.counter ++
                        this.condition = this.counter > 3 ? 'Тоолуур 3-аас их' : 'Тоолуур 3-аас бага' 
                    },
                    sub: function() {
                        this.counter --
                        this.condition = this.counter > 3 ? 'Тоолуур 3-аас их' : 'Тоолуур 3-аас бага' 
                    }
                }
            })
        </script>        
    </body>

авч үзье. Хуудаст тоолуурын counter талбар, харьцуулалтын үр дүнгийн condition талбаруудыг үзүүлэх h2, h3 гарчигаас гадна тоолуурын утгыг нэмэх, хасах хоёр товч байгаа.

Компонентууд хоорондоо холбогдон ажиллах шаардлага гарах нь мэдээж. Иймд хичээлээр компонентууд хоорондоо хэрхэн холбогдохыг авч үзье. Компонентыг Vue-д бүртгэх хичээлийн жишээнд App, Car хоёр компонентийг үүсгээд App компонентод Car компонентийг бүртгээд түүний темплейтийн суурь div дотор Car компонентийг оруулан ирсэн. Програмыг ажлуулбал

үр дүнг үзүүлж байгаа.

Өмнөх Компонент гэж юу болох хичээлд бид react дээр програмийн кодийг бичихдээ react -ийг index.html файлд оруулан ирэн шууд ашигласан. Програмийн кодийг нэг файлд бүгдийг бичих, кодийг шалгах ажиллагаа, jsx -ийн компиляцийг хийхдээ babel санг нэмэлтээр оруулан ирэх зэрэг нь тийм сайн практик биш тул програм үүсгэх ажиллагааг автоматжуулсан хэрэгслийг react -ийг бүтээгчид боловсруулсан. Дурын хайлтын /жишээ нь google/ системээр create react app мөрийг хайлгавал хэрэгслийг эхний мөрүүдэд олон ирнэ.