Програмчлалын аль ч хэл дээр програм боловсруулахдаа тодорхой сан, хэрэгслүүдийг ашиглахгүйгээр хийнэ гэсэн ойлголт байхгүй. Javascript хэлний боломжийг илүү үр дүнтэй ашиглах үндсэн арга бол javascript фреймворкийг судлан суралцах явдал. Иймээс сайтад Vuejs фреймворкийн хичээлүүдийг багц болгон нийтэлж байгаатай танилцаарай. Энэ удаад директивт аргумент дамжуулан ашиглахыг авч үзье. Аргумент гэдгийг юу гэж ойлгох вэ? Үүнийг өмнөх хичээлүүдэд ашиглаж сурсан директивийн жишээнээс харцгаая. Жишээ нь бид товч дээр даралт хийх үйл явцын сонсогчийг

<button @click="title = 'New title'">Change title</button>

гэж тавин өгдөг. @ тэмдэгт бол v-on: бичлэгийн хураангуй бичилт гэдгийг сануулъя. Иймээс @click гэдгийг v-on:click гэж бичиж болно. Бичлэгийн тодорхойлох цэгийн араас өгөгдсөн (манай тохиоллдолд click) зүйлийг аргумент гэж нэрлэдэг бөгөөд энэ нь директивт дамжигдан очдог.

Хичээлээр ES6 -д бий болсон Rest, Spread операторуудын талаар авч үзэх юм. Операторуудын ажиллагааг судлахын тулд эхлээд зарим нэгэн бэлтгэл ажлыг хийх хэрэгтэй. num, str хоёр параметрийг аваад тэдгээрийг консолд үзүүлэх logStrings функцийг үүсгээд түүнийг дуудсан дараах кодыг авч үзье.

function logStrings(num, str) {
    console.log(num, str);
}

logStrings(20, 'e-surgalt.com');

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

Өмнөх хичээлүүдэд хэрэглэгчийн оруулсан эмайл, нууц үгэнд шалгалт хийх формыг зохиогоод байгаа. Өөрөөр хэлбэл бид бүртгэлийн формийг үүсгэсэн. Одоо формдоо түүнийг илгээх товчийг нэмвэл бүрэн хэмжээний ажиллагаатай болохоор байгаа. Иймээс формийн хэвд хамгийн сүүлийн form-group класстай div -ийн ард

<template>
  <div class="container">
    <form action="" class="pt-4">
      ...    
      <button class="btn btn-success">Submit</button>            
    </form>
  </div>
</template>

bootstrap -ээр хэвжүүлсэн Submit товчийг нэмэн оруулаад хуудсаа шинэчилбэл