Веб сайт боловсруулагчид эрт орой хэзээ нэгэн цагт өөрийн хуудастаа интерактив байдлыг бий болгох шаардлага гарцаагүй гарч ирдэг. Энд Javascript -ийг ашиглахгүйгээр тойрон гарах боломжгүй. Веб бүтээгдхүүнийг хэрэглэгч ашиглахад амархан, эвтэйхэн байлгахын тулд түүнийг үүсгэхдээ сүүлийн үеийн веб технологийг ашиглах хэрэгтэй. Веб технологиуд нь хэрэглэгч болон сервер талд ажиллах боломжоороо янз бүрийн хязгаарлалттай байдаг. JavaScript нь дээрх хоёр салангид технологийг нийлүүлэн маш үр дүнтэй харилцан холбоо бүхий ажиллагааг хангаж өгдөг онцгой чанартай. Иймд та веб программчлал сонирхдог эсхүл суралцаж байгаа бол та яг хэрэгтэй газраа ирсэн байна.
Нээгдсэн тоо: 349 Нийтийн
react програм үүсгэх хичээлд create-react-app хэрэгслээр үүсгэсэн шинэ төслийг бүтэцтэй танилцая. Хичээлийн кодийн засварт би VSCode -ийг ашиглах бөгөөд D дискний projects хавтас дахь react хавтаст үүсгэсэн react-less хавтасыг код засварлагч дээр нээе.
Төслийн хавтас доторх үндсэн файлуудаас package.json бол маш чухал файл.
Нээгдсэн тоо: 410 Бүртгүүлэх
Өмнөх Компонент гэж юу болох хичээлд бид react дээр програмийн кодийг бичихдээ react -ийг index.html файлд оруулан ирэн шууд ашигласан. Програмийн кодийг нэг файлд бүгдийг бичих, кодийг шалгах ажиллагаа, jsx -ийн компиляцийг хийхдээ babel санг нэмэлтээр оруулан ирэх зэрэг нь тийм сайн практик биш тул програм үүсгэх ажиллагааг автоматжуулсан хэрэгслийг react -ийг бүтээгчид боловсруулсан. Дурын хайлтын /жишээ нь google/ системээр create react app мөрийг хайлгавал хэрэгслийг эхний мөрүүдэд олон ирнэ.
Нээгдсэн тоо: 598 Төлбөртэй
React компонентод тулгуурладаг сан тул компонент гэж юу болохыг ойлгоцгооё. Үүний тулд машиний мэдээллийг үзүүлэх
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Lesson 01_02</title>
<style>
.car {
display: inline-block;
border: 2px solid #ccc;
box-shadow: 2px 2px 1px #eee;
padding: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="car">
<h3>Toyata Camry</h3>
<p>Year: <strong>2019</strong></p>
</div>
</body>
</html>код бүхий html файлыг үүсгээд хөтөч дээр нээвэл
гэж харагдана.
Нээгдсэн тоо: 284 Бүртгүүлэх
Сангийн албан ёсны сайтын нүүр хуудас дахь Get Started товчоор шилжилт хийвэл React -ийн материалууд /Docs/ хэсэгт шилжинэ.
Getting Started хэсэгт React -ийг ажиллуулах аргуудын мэдээлэл бий. Жишээ нь CodePen, CodeSandbox гэх мэт онлайн сервисүүд дээр турших, веб сайтад санг нэмэх, React app үүсгэх гэх мэтээр.
Нээгдсэн тоо: 485 Нийтийн
React бол динамик ажиллагаатай, нарийн төвөгтэй веб програмийг боловсруулах сайн технологи бөгөөд хичээлээр React -ийг яагаад судлах хэрэгтэй, технологийн үндсэн зарчмуудын талаар авч үзнэ. React -ийн албан ёсны сайтад хандвал түүнийг зохиогчид хэрэглэгчийн интерфейсийг үүсгэх Javascript сан хэмээн тодорхойлсон байгаа. Хэрэглэгчийн интерфейс гэдэг нь ямарч веб програмд хандахад таны хөтөч дээр нээгдэх дэлгэцүүдийг хэлж байгаа юм.
Нээгдсэн тоо: 734 Нийтийн
Бодит ажилд нэг чиглүүлэгчээр шилжсэн хуудаснаас тухайн чиглүүлэгчид агуулагдах давхар чиглүүлэгчээр дамжин шинэ хуудас нээх хэрэгцээ их гардаг. Жишээ нь машины мэдээллийг харуулж буй 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 фреймворкийн үндсэн ойлголтууд хичээлийн багцыг үзэхийг зөвлөе.
Нээгдсэн тоо: 817 Төлбөртэй
Өмнөх хичээлүүдэд бид хоёр хуудсыг үүсгээд тэдгээрт шилжих чиглүүлэгчийг (router) тохируулаад байгаа. Энэ удаад динамик чиглүүлэгчийг хэрхэн хэрэглэхийг авч үзье. Үүний тулд дараах тохиолдлыг авч үзье. Програмын Cars хуудаст машинуудын жагсаалтыг үзүүлэхээр болгон
<template>
<div>
<h1>Cars page</h1>
<ul>
<router-link
tag="li"
v-for="car in 5"
:to="'/car/' +car"
:key=car
>
<a>Car {{car}} </a>
</router-link>
</ul>
</div>
</template>гэж өөрчилье.
Нээгдсэн тоо: 1187 Бүртгүүлэх
Навигацийг /чиглүүлэгч/ үүсгэх хичээлээр үүсгэсэн цэснүүдээс шилжилт хийхэд сүүлд сонгогдсон цэс аль нь болохыг мэдэхэд хүндрэлтэй байгаа. Иймээс хуудасны идэвхитэй холбоосыг тэмдэглэх классыг хэрхэн оруулан ирэхийг авч үзье. Bootstrap -д сонгогодсон цэсийг тэмдэглэх active гэсэн класс байдгийг цэснүүдийн аль нэгэнд
<ul class="navbar-nav">
<li class="nav-item">
<router-link class="nav-link" to="/">Home</router-link>
</li>
<li class="nav-item active">
<router-link class="nav-link" :to="'/cars'">Cars</router-link>
</li>
</ul>тавин өгөөд хуудсаа хөтөч дээр нээвэл
Нээгдсэн тоо: 1087 Төлбөртэй
Роутерийг тохируулах хичээлээр төсөлд Home, Cars хуудсуудыг үүсгэн чиглүүлэгчийг тохируулан бүртгүүлсэн хэдий ч хуудас хооронд шилжихдээ хаягийн мөрөнд шууд бичин өгч байгаа. Иймээс хуудас хоорондын шилжилтийг цэс үүсгэн түүгээр дамжуулан хийе. Та Формын шалгалтын бэлтгэл хичээлийг үзсэн бол төсөлд Bootstrap -ийг суулгасан гэдгийг мэдэж байгаа.
Нээгдсэн тоо: 921 Төлбөртэй
Vuejs фреймворкт роутингийг /чиглүүлэгч/ хийдэг vue router пакетыг vue-router -ийг суулгах хичээлээр төсөлдөө нэмэн суулгасан. Одоо хэрэглэгчийн сонгосон хаягаас хамааран дэлгэц дээр үзүүлэх хуудсуудыг бэлтгэх хэрэгтэй. Иймээс төслийн src хавтаст pages хавтасыг үүсгээд түүнд роутерийн утгаас хамааран үзүүлэх хуудас буюу компонентуудыг үүсгэн өгье. pages хавтаст
<template>
<h1>Home page</h1>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>кодтой Home.vue
тэгшитгэлийг бод.
хязгаарыг бодоорой.