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

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан. Түүнээс гадна програмийн бүх хуудаст давтагдах хэсэгт зориулан Layout /макет/ компонентийг боловсруулсан. Layout /макет/ компонент бусад хуудаснуудад давтагдах хэсгийг агуулах учраас кодийг

import React from "react";
import { Link } from "react-router-dom";
import "./Layout.scss";

const Layout = () => {
  return (
    <>
      <header>
        <nav className="nav">
          <ul>
            <li>
              <Link to="/">Нүүр</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/cars">Cars</Link>
            </li>
          </ul>
        </nav>
      </header>
      <main>
        <h2>Агуулга</h2>
      </main>
      <footer>2023 Он</footer>
    </>
  );
};

export default Layout;

блокуудад салгаад хуудасны ажиллагааг шалгавал

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

<template>
  <div>
      <h2>{{ title }}</h2> 
      <input type="text" v-model="searchName">
      <ul>
        <li v-for="(name, index) of names" :key="index">{{ name }}</li>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: 'Hello I am Vue!',
      searchName: '',
      names: ['Баатар', 'Болд', 'Цэцгээ', 'Алимаа']
    }
  }
}
</script>

кодоор авч үзье.

Сайтад тавигдаж буй Vue фреймворкийн хичээлүүд -ийг бүгдийг нь үзвэл фреймворкийн талаар илүү гүнзгий ойлголтыг авна гэдгийг зөвлөе.

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