VueJS гэж юу болох

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

Сайт бүтээх уламжлалт технологид веб хөтөч серверт тодорхой хүсэлт (requiest) явуулаад түүнээс ирүүлсэн мэдээллийг хэрэглэгчид үзүүлэх үүргийг голлон гүйцэтгэн харин өгөгдлийн сангаас мэдээлэл татан, хуудсыг бүрдүүлэх, буцаан дамжуулах бүхий л ажлыг сервер хариуцан хийдэг. Та ямар нэгэн сайт бүтээж байсан бол яг ийм үүргийг Php хэл сервер талд гүйцэтгэдэг гэдгийг мэдэх байх. Сайтын ямар нэгэн мэдээллийг өөрчлөх хэрэгтэй болбол хөтөч серверт дахин хүсэлтийг илгээн сервер хуудсыг бүрдүүлэн хөтөчид буцааснаар сайтын агуулга өөрчлөгдөнө. Эдгээр ажиллагааг хийхэд сервер тодорхой хугацаа зарцуулах нь ойлгомжтой тул ажиллагааг хурдан болгох зорилгоор мэрэгжилтнүүд сайтад хэрэглэгч талд үзүүлж буй хуудаст javascript -ийг оруулснаар зарим нэгэн зүйлийг динамикаар буюу серверт хандахгүйгээр хийх боломжийг нэвтрүүлсэн. Үүний үр дүнд олон төрлийн ажиллагааг хөтөч дээр шууд хийн хуудсыг удирдах боломжтой Jquire гэх мэтийн сангууд бий болсон. Эдгээр сангуудад тодорхой ажиллагаануудыг хийх нэгдсэн стандарт байхгүй байсан нь асуудал болж байлаа. Жишээлбэл сайтад нэвтрэх формд логин, нууц үгээ оруулаад серверт илгээхэд тухайн асуудлын шийдлийг сан болгон өөрийнхөөрөө шийдэх жишээтэй. Ажиллагаануудыг тодорхой стандарттай болгох үүднээс javascript фреймворкууд гарч ирсэн. Олонд танигдсан фреймворкууд гэвэл Angular, React -ийг нэрлэж болно. Vue бол Angular, React -ийн сайн талуудыг өөртөө шингээсэн сурахад энгийн, маш жижигхэн фреймворк. Фреймворкийн албан ёсны сайтаас харвал

Vue фреймворк шахагдсан байдлаараа ердөө 20KB хэмжээтэй нь харагдана. Vue -г дараах байдлаар ашиглах боломжтой.

  • Өмнө нь хийгдсэн сайтын нэмэлт хэрэгслээр. Өөрөөр хэлбэл та Php дээр зохиосон сайтдаа тодорхой динамик ажиллагааг оруулъя гэвэл фреймворкийг хуудастаа оруулаад түүний боломжийг чөлөөтэй ашиглаж болно.
  • Vue фреймворкийг ашиглан бүрэн хэмжээний SPA (single page application) програмыг зохиож болно.

Одоогоор Vue -ийн Github хуудасны хэрэглэгчдийн үнэлгээ Star -ийн тоог Angular, React -ийнхтай харьцуулбал тэднээс давсан үзүүлэлттэй болоод байгаа. Та үүнийг өөрөө шалгаад үзээрэй. Vue -гийн зохиогч Evan You нь Angular2 -ын боловсруулалт дээр ажиллаж байсан мэрэгжилтэн бөгөөд өмнө нь гарсан javascript фреймворкуудын сайн талуудыг илүү хөнгөн, ашиглахад энгийн болгон шинэ фреймворкдоо оруулсан нь гарцаагүй. Дараагий хичээлүүдээр Vue -гийн боломжуудыг судлах болно.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 294 Төлбөртэй

Програмийн хэрэглэгч талын интерфейсийг css -ээр хэвжүүлэн ашиглахад эвтэйхэн, ойлгомжтой болгодог. Иймээс энэ хичээлээс react компонентийн элементүүдийг хэрхэн хэвжүүлэх талаар авч үзье. Манай төслийн интерфейс

зурагт үзүүлсэн хэлбэртэй болоод байгаа.

  Нээгдсэн тоо: 730 Төлбөртэй

ES6 -д бий болсон модулийн системийн дүрмийн талаар үзэхийн өмнө зарим бэлтгэл ажлыг хийх хэрэгтэй. Төслийн үндсэн хавтаст extra.js файлыг үүсгээд дараах кодыг

let name = 'e-surgalt.com';
let age = 6;

оруулан өгье. extra.js файлд зарлагдсан хоёр хувьсагчийг index.js файлд оруулан ирэх хэрэг гарлаа гэе. Энд хоёр нөхцлийг хангана. Нэгд бусад модулууд extra.js файлд зарлагдсан хувьсагчдыг өөртөө ашиглах боломжийг нээх зорилгоор түүнийг гадагш экспортлох ёстой. Хоёрт бусад модулаас эскпорт хийгдсэн зүйлийг ашиглах модул нь импортлох хэрэгтэй.

  Нээгдсэн тоо: 1048 Төлбөртэй

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

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

const original = function () {
    return 100;
};
console.log(original());

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

  Нээгдсэн тоо: 349 Төлбөртэй

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас хооронд динамик буюу дахин ачаалахгүйгээр шилжилт хийх боломжийг бүрдүүлсэн. App компонентийн кодод бүртгүүлсэн

function App() {
  return (
    <div>
      <nav className="nav">
        <ul>
          <li>
            <Link to="/">Нүүр</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <hr />
      <Routes>
        <Route path="/" element={<Cars />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

/ чиглүүлэгч манай нүүр хуудас буюу http://localhost:3000/ хаягийг зааж байгаа ч Cars компонентод шилжиж байгаа нь логикийн талаасаа ойлгомж муутай болсон. Иймээс кодийг / чиглүүлэгчээр нүүр хуудаст шилждэг болгоё.

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 42

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 51

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 65

 

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 182

 

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

Нээгдсэн тоо : 230

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

Нээгдсэн тоо : 239

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 270

 

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 265

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 349

 
Энэ долоо хоногт

Хоёр ажилчин хамтарч ажиллавал даалгаварыг 2 цаг 48 минутад биелүүлж чадна. Дангаараа ажиллавал нэгдүгээр ажилчин хоёрдугаараасаа 4 цаг 12 минутын өмнө даалгаврыг биелүүлнэ. Тэгвэл тэд дангаараа ажиллавал: Нэгдүгээр ажилчин цагт, хоёрдугаар ажилчин цагт даалгаврыг гүйцэтгэнэ.

Нээгдсэн тоо : 1551

 

тэгшитгэлийг бод.

Нээгдсэн тоо : 1102

 

Тойргийн диаметрт тулсан багтсан өнцөг хэдэн градустай тэнцэх вэ?

Нээгдсэн тоо : 807