Формын өгөгдөлд шалгалт буюу validation хийх ажиллагаа ямарч програмын хувьд чухал хэсэг байдаг тул материалыг анхааралтай судлан ойлгон автлаа үзээрэй. Формын шалгалтуудад ашиглах төслийг Формын шалгалтын бэлтгэл хичээлд үүсгэн Vuelidate пакетийг суулган цахим шуудангийн хаягийг авах талбарыг нэмсэн. Одоо формын шалгалтад Vuelidate пакетийг хэрхэн ашиглахыг сурцгааж эхлэе.
Материалыг тусгай эрхтэй хэрэглэгч үзнэ.
request_quoteТусгай эрх авахМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 854 Нийтийн
Өмнөх хичээлүүдэд бид create-react-app хэрэгслээр үүсгэсэн төслийн суурь код дээр жишээнүүдийг судласан. Одоо react төсөлд өөр компонентууд үүсгэн тэдгээрийг өөр хооронд нь холбон ашиглахыг сурцгаая. react -ийн компонентийг голдуу тусд нь хавтас үүсгэн байршуулдаг тул бид төслийн src хавтаст Car нэртэй хавтасыг үүсгээд түүн дотор Car.js файлыг үүсгээрэй.
react -д компонентийг үүсгэх хоёр үндсэн арга байдаг талаар JSX хичээлд дурдсан.
Нээгдсэн тоо: 990 Нийтийн
Өмнөх хичээлүүдэд бид эцэг болон хүүхэд компонентууд хоорондын харилцан ажиллагааг судалсан. Одоо хүүхэд компонентууд буюу нэг түвшингийн компонентууд хоорондоо хэрхэн харьцах талаар үзье. Үүний тулд төслийн components хавтаст
<template>
<div>
<h1>Тоолуур: {{ counter }}</h1>
</div>
</template>
<script>
export default {
props: ['counter']
}
</script>кодтой Counter.vue компонентийг үүсгэе. Counter компонент өөртөө ирэх параметрийн утгыг h1 тегд тоолуурын утгаар л үзүүлнэ.
Нээгдсэн тоо: 2713 Нийтийн
Хичээлүүдийг үзэхэд таньд текст засварлагч Notepad ++ тэгээд интернет хөтөч байхад л хангалттай. Хичээлийн бүх жишээг өөрөө бичин туршин үзээрэй.
JavaScript-ийн бичлэгийн дүрэм
JavaScript –ийг үзэж эхлэхийн өмнө түүнийг бичлэгийн үндсэн дүрмүүдийг мэдэх хэрэгтэй. JavaScript ба Java -гийн бичлэгийн дүрэм C болон C++ ийнхтай адилхан. Хэрвээ та C-гийн төрлийн ямар нэгэн хэлийг мэддэг бол Javascript -ийг сурахад их амархан.
Үндсэн дүрмүүдээс дурдвал
Нээгдсэн тоо: 300 Бүртгүүлэх
useMemo хукийн судалгааг
import React, {useState} from 'react'
function App() {
const [number, setNumber] = useState(40)
return (
<div className="container">
<h1>Тооцоологдох шинж: {number}</h1>
<button className={'btn btn-success mx-3'} onClick={() => setNumber(prev => prev + 1)}>Нэмэх</button>
<button className={'btn btn-danger'} onClick={() => setNumber(prev => prev - 1)}>Хасах</button>
</div>
);
}
export default App;код дээр харцгаая. useState -ээр 40 гэсэн анхны утгатай number хувьсагчийг үүсгээд хуудаст h1 гарчигаар number хувьсагчийн утгыг харуулаад Нэмэх, Хасах хоёр товч дээр дарахад setNumber функцээр number хувьсагчийн утгыг өөрчилнө. Кодийг ажлуулбал
хуудас нээгдэнэ.
тэнцэтгэл биш хэдэн бүхэл тоон шийдтэй вэ?
тэгшитгэлийг бод.