Чиглүүлэгч буюу url хаягт ямар параметрүүдийг дамжуулж болохыг үзье. Давхар чиглүүлэгчид хичээлд машины тухай дэлгэрэнгүй мэдээллийг
гэж харуулсан. Өөрөөр хэлбэл ямарч машиныг мэдээллийг CarFull компонентод шууд заасан байгаа.
Материалыг бүртгэлтэй хэрэглэгч үзнэ.
how_to_regБүртгүүлэхМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 549 Бүртгүүлэх
Хичээлээр react компонентийн элементүүдийн хэвжүүлэлтэд хэрэг болох нэгэн аргачлалыг авч үзье. Тухайлбал элементийг inline -аар хэвжүүлэлтийн үед ашиглах техник юм. Иймээс Car компонентийн хэвжүүлэлтийн Car.css файлаас
.Car {
margin-bottom: 10px;
display: block;
padding: 10px;
border-radius: 5px;
}border, box-shadow хэвүүдийг хасан тэдгээрийг Car компонентод inline -аар хэвжүүлэлтээр
const style = {
border: '1px solid #ccc',
boxShadow: '0 4px 5px 0 rgba(0, 0, 0, .14)'
}
return (
<div className="Car" style={style}>
<h3>Машиний нэр: {props.name}</h3>
<p>Он: <strong>{props.year}</strong></p>
<input
type="text"
onChange={props.onChangeName}
value={props.name}
className={inputClasses.join(' ')}
/>
<button onClick={props.onDelete}>Устгах</button>
</div>
)style хувьсагчид тодорхойлоод Car компонентийг багцалж буй div -ийн style атрибутад дамжуулах болгон өөрчилье.
Нээгдсэн тоо: 950 Төлбөртэй
Vue -ийн хувийн амьдралын мөчлөгийн талаар авч үзье. Vue -гийн хувь бүрд өөрийн гэсэн амьдралын мөчлөг байдаг бөгөөд тодорхой үе шатуудыг ажиглах боломжтой. Програмын амьдрах мөчлөгийн үе шатуудыг
<body>
<div id="app">
<h2>{{ title }}</h2>
<button @click="title = 'Гарчигийг өөрчлөв'">Гарчигийг өөрчлөх</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
title: 'Vue програм'
}
})
</script>
</body>кодоор авч үзье. Код хуудаст title талбарыг үзүүлээд Гарчигийг өөрчлөх товчийг дарахад title талбарын утгыг өөрчлөнө. Бид ажиглалт хийж болох эхний үе шат бол Vue програмын инициализац юм. new Vue({ ... }) командаар Vue програмын инициализац хийгдэх боловч хэрэглэгч хуудсыг харах хүртэл хэдэн шатыг дамждаг.
Нээгдсэн тоо: 447 Бүртгүүлэх
Хичээлээр react -ийн хамгийн чухал бөгөөд хэрэгтэй хукуудийн нэг болох useCallback -ийн талаар авч үзье. Хукийн судалгааг дараах
import React, {useState} from 'react'
function App() {
const [colored, setColored] = useState(false)
const [count, setCount] = useState(1)
const styles = {
color: colored ? 'darkred' : 'black'
}
return (
<div className="container">
<h1 style={styles}>Элементийн тоо: {count}</h1>
<button className={'btn btn-success mx-3'} onClick={() => setCount(prev => prev + 1)}>Нэмэх</button>
<button className={'btn btn-warning mx-3'} onClick={() => setColored(prev => !prev)}>Өөрчлөх</button>
</div>
);
}
export default App;кодоор авч үзье. Компонентийн код логикийн хувьд өмнөх хичээлүүдийнхтэй бараг ижил тул тайлбарлах нь илүүц гэж үзлээ.
Нээгдсэн тоо: 966 Төлбөртэй
ES6 -д шинээр бий болсон бас нэг зүйл болох функцийн анхдагч параметрүүдийн талаар хичээлд авч үзэцгээе. Эхлээд ES5 -д функцийн параметрт анхдагч утгыг олгохдоо ашигладаг байсан аргачлалыг харуулсан жишээг авч үзье.
const func = (a) => {
return a;
};
console.log(func());Функцийг тодорхойлохдоо ES6 -гийн бичлэгээр бичсэн. Терминалаас webpack -ийг дуудан багцыг үүсгээд index.html файлыг нээгээд консолыг харвал
тэгшитгэлийг бод.
бол 
илэрхийллийн утгыг ол.