Сүүлийн жилүүдэд сайт боловсруулах ажиллагаанд раектив буюу дэвшилтэд Angular, React гэх мэтийн javascript сангууд маш хүчтэй түрэн орж ирэх болсон. Үүний нэг бол Vue фреймворк бөгөөд сайтад энэхүү дэвшилтэд технологи ямар боломжтой, бусдаас ямар давуу талуудтай, ямар зориулалттай болохыг цуврал хичээлүүдээр толилуулна. Эхлээд Javscript фреймворкууд яагаад ийм хүчтэй түрэн орж байгаа талаар ярилцая.

Програм ямар нэгэн алдаагүй зөв ажиллаж байх хэрэгтэйг бүгд мэднэ. Харин програм зохиогч өөрийн кодийг хурдтай ажилладаг, зохион байгуулалт сайтай, ойлгомжтой байлгахыг байнга эрмэлзэх ёстой. Програм зохиогч бүр програм боловсруулалтын 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 гарчигаас гадна тоолуурын утгыг нэмэх, хасах хоёр товч байгаа.

ES6 -д шинээр бий болсон бас нэг зүйл болох функцийн анхдагч параметрүүдийн талаар хичээлд авч үзэцгээе. Эхлээд ES5 -д функцийн параметрт анхдагч утгыг олгохдоо ашигладаг байсан аргачлалыг харуулсан жишээг авч үзье.

const func = (a) => {
    return a;
};

console.log(func());

Функцийг тодорхойлохдоо ES6 -гийн бичлэгээр бичсэн. Терминалаас webpack -ийг дуудан багцыг үүсгээд index.html файлыг нээгээд консолыг харвал

Бодит ажилд нэг чиглүүлэгчээр шилжсэн хуудаснаас тухайн чиглүүлэгчид агуулагдах давхар чиглүүлэгчээр дамжин шинэ хуудас нээх хэрэгцээ их гардаг. Жишээ нь машины мэдээллийг харуулж буй Car компонентийн үзүүлж буй хуудаснаас тухайн машины талаар илүү дэлгэрэнгүй мэдээллийг харуулах хуудаст шилжих хэрэгтэй болсон гэе. Үүнийг VueJs -д давхар чиглүүлэгчийг ашиглан хийдэг. Car компонентоос өөр хуудаст шилжилт хийх гэж байгаа тул түүний шаблонд

<template>
  <div>
    <h1>Car id {{ id }}</h1>
    <button class="btn btn-sm btn-primary mb-2" @click="backToCars">Back</button>
    <br>
    <button class="btn btn-info mt-2">Full info</button>
  </div>
</template>

дахин нэг товчийг нэмэн өгье.

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