Роутерийг тохируулах хичээлээр төсөлд Home, Cars хуудсуудыг үүсгэн чиглүүлэгчийг тохируулан бүртгүүлсэн хэдий ч хуудас хооронд шилжихдээ хаягийн мөрөнд шууд бичин өгч байгаа. Иймээс хуудас хоорондын шилжилтийг цэс үүсгэн түүгээр дамжуулан хийе. Та Формын шалгалтын бэлтгэл хичээлийг үзсэн бол төсөлд Bootstrap -ийг суулгасан гэдгийг мэдэж байгаа.

Сүүлийн жилүүдэд javascript фреймворкууд эрчимтэй хөгжснөөр интернетэд сууриласан програм, сайтын хэрэглэгч талын интерфесийг javascript -ээр бүтээх хандлага давамгайлах болоод байгаа. Ялангуяа SPA буюу нэг хуудас аплликашн технологи маш эрчимтэй орон ирсэн. Энэ хандлага ирээдүйдээ ч нилээд олон жил байр сууриа алдахгүй болов уу. Иймээс програмчлалын чиглэлээр суралцаж байгаа болон ажиллаж буй залуучууд javascript хэлийг эзэмшсэн өөрийн ажлын хэрэгсэл болгохыг хичээнгүйлэн зөвлөе.  

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

const original = function () {
    return 100;
};

console.log(original());

дээрх байдлаар function түлхүүр үгийг ашиглан зарладаг. Кодод 100 утгыг буцаах функцийг зарлаад түүнийг original тогтмолд олгоод дараа нь түүнийг консолд үзүүлэхээр дуудсан.

Vuejs фреймворкт роутингийг /чиглүүлэгч/ хийдэг vue router пакетыг vue-router -ийг суулгах хичээлээр төсөлдөө нэмэн суулгасан. Одоо хэрэглэгчийн сонгосон хаягаас хамааран дэлгэц дээр үзүүлэх хуудсуудыг бэлтгэх хэрэгтэй. Иймээс төслийн src хавтаст pages хавтасыг үүсгээд түүнд роутерийн утгаас хамааран үзүүлэх хуудас буюу компонентуудыг үүсгэн өгье. pages хавтаст

<template>
  <h1>Home page</h1>
</template>

<script>
export default {
    
}
</script>

<style scoped>

</style>

кодтой Home.vue

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