Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо 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;

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

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

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

<script>
export default {
    
}
</script>

<style scoped>

</style>

кодтой Home.vue

Хөтөч дээр ажилладаг интернетэд сууриласан програмын боловсруулалт хийхэд javascript хэлийг ашиглах шаардлага зүй ёсоор гарч ирдэг. Иймээс хөтөчүүд ойлгон ажилладаг энэхүү хэлийг програм зохиогчид заавал мэдэж байх хэрэгтэй. Энэ удаад ES6 -д мөрүүдтэй ажиллаха ажиллагаанд орсон өөрчлөлтүүд тэдгээртэй ажиллах ажиллагаа хир хөнгөн болсонг үзье. Эхлээд мөрүүдийг хооронд нь холбох тохиолдолыг авч үзье. Бидэнд

let name = 'e-surgalt.com';
let str = 'Манай сайтад зочилсонд танд баярлалаа!';

хоёр мөр байлаа гэе. str хувьсагчид name хувьсагчийг оруулан шинэ мөрийг гаргахын тулд өмнө нь холболтын операторыг

let name = 'e-surgalt.com';
let str = 'Манай ' + name + ' сайтад зочилсонд танд баярлалаа!';
console.log(str);

гэж ашигладаг байсан.

Хэрэглэгчтэй харьцах үндсэн элемент бол форм. Хөтөч дээр ажиллах програм зохиоход хэрэглэгч талын дэлгэцийг уян хатан, динамик ажиллагаатай болгоход javascript -гүйгээр төсөөлөхөд бэрх. Энэ хичээлээс html5 -ын хэрэглэгчтэй харилцах формын элементүүдтэй VueJs -ээр хэрхэн харьцахыг суралцаж эхлэнэ. Формд хамгийн ихээр хэрэглэдэг input элементийн ажиллагааг

<template>
  <div>
      <h2>Form inputs</h2> 
      <input type="text">
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: ''
    }
  }
}
</script>

жишээгээр авч үзье. Vue фреймворкийн үндсэн ойлголтууд багцын хичээлүүдийг эхнээс үзсэн бол дээрх кодыг төвөггүй ойлгоно. Аливаа зүйлийг энгийнээс эхлэн зөв ойлговол сурахад дөхөм байдаг тул багц хичээлүүдийг үзэхийг зөвлөе. Зарим хичээл төлбөртэй тул та тусгай эхртэй хэрэглэгч байх ёстойг анхаарна уу.

Жич: Үнэ төлөөд үзэх эсэх нь таны сонголт. Гэхдээ дараа болъё, үнэгүй хичээл олдоно гэх мэтээр хойшлуулах нь эргээд алдагдсан боломж болдог. Цаг хугацаа таныг хүлээхгүй. Хичээлүүдийг бэлтгэх явцад Vue фреймворкийн шинэ хувилбарууд гарч ирсэн хэдий ч ерөнхий зүйл хэвээрээ. Шинэ хувилбарт орсон өөрчлөлтийг хичээлийн материалд туршин шалгаад явах нь бүр ч илүү үр дүнтэйг сануулъя.