Html хэвийн элементүүдэд хэвжүүлэлтийн стилийг шууд буюу inline /элементийн тодорхойлолтын мөрөнд/ зааж болдог. Үүнийг React компонентийн хэвийн элементүүдэд хэрхэн өгөхийг App компонентийн
class App extends Component {
render() {
return (
<div>
<h1>
Hello world!
</h1>
</div>
)
}
}кодоор харцгаая.
Материалыг бүртгэлтэй хэрэглэгч үзнэ.
how_to_regБүртгүүлэхМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 1483 Төлбөртэй
Хэрэглэгч талын хуудасны event буюу үйл явцын боловсруулалт динамик ажиллагааны чухал хэсэг байдаг. ИЙмээс VueJs -ээр үйл явцыг тодорхойлон тэдгээрийн боловсруулалтыг хэрхэн хийхийг
<body>
<div id="app">
<h2>Тоолуур = {{ counter }}</h2>
<button>Нэмэгдүүлэх</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
</body>кодтой хуудсаар судлая. Кодод h2 гарчигт Тоолуур = текстийн араас {{ counter }} гэж хувьсагчийг үзүүлнэ. counter -ийг Vue -гийн тохиргооны обьектын data талбарт 0 утгатайгаар зарласан.
Нээгдсэн тоо: 1312 Төлбөртэй
Сүүлийн үед веб програмчлалд хүчтэй орж ирж буй javascript фреймворкуудын нэг бол яах аргагүй VueJs сан. Javascript -ийг ашиглахгүйгээр вебэд суурилсан програмыг динамик болгох аргагүй тул хөтөчийн хэлийг үзэн судлах зайлшгүй шаардлагатай гэж үзэн Vue фреймворкийн хичээлүүдийг цувралаар нийтэлж байгаа билээ. Хичээлүүдийг Vue фреймворкийн үндсэн ойлголтууд багц хичээлээс бүгдийг үзээрэй. Vue CLI -ийг суулган түүгээр шинэ төслийн генераци хийхэд төслийн нэрээр хавтас үүсгэдэг гэдгийг CLI суулган төсөл үүсгэх хичээлд үзсэн. Vue CLI -ийн үүсгэсэн хавтасыг код засварлагч дээр нээвэл
дээрх зурагт үзүүлсэн бүтэцтэй харагдана. Хавтаст доторх файлууд ямар үүрэгтэй, зориулалттай болохыг авч үзье.
Жич: Vue CLI хэрэгслийг маш хурдтай хөгжүүлж байгаа учраас зарим зүйлүүд хичээлийнхтэй тохирохгүй байх магадлалтай тул хэрэгслийн албан ёсны сайтаас хамгийн сүүлийн мэдээллийг тогтмол авч байхыг сануулъя.
Нээгдсэн тоо: 342 Нийтийн
Хичээлээр Үр дүнгийн компонент хичээлээр хийсэн компонентод динамик ажиллагааг хэрэгжүүлве. Өөрөөр хэлбэл сорилгын үр дүнг динамикаар үзүүлэх юм. Үүний тулд Quiz компонентод
const [results, setResults] = useState({})сорилгын үр дүнгийн results төлвийг нэмэн өгье. results обьект үр дүнг {[асуултын_id]: хариултын_төлөв} хэлбэрээр агуулна. Өөрөөр хэлбэл хариултын төлөв талбарт хариулт зөв бол right буруу бол wrong утгыг агуулах юм.
Нээгдсэн тоо: 768 Нийтийн
Програмийн кодчлолийг тусгайлан заалгаж сурдаг зүйл биш. Ямарч зүйлийг өөрөө бие даан сурах боломжтой. Энэ талаар Бие даан сурах нийтлэлийг үзээд эрэгцүүлэн бодоорой. Энэ удаад Input талбарын боловсруулалтын талаар судлая.
Өмнөх хичээлүүдэд хуудасны элементүүдэд үйл явцын сонсогчийг тавин, түүнд параметр дамжуулан хүлээн авах аргуудыг сурсан. Энэ хичээлээр Input талбарт үүссэн үйл явцыг хэрхэн боловсруулахыг судлая. Үүний тулд App компонентийн h1 гарчигийн доор input талбарыг
<div style={divStyle}>
<h1>
{this.state.pageTitle}
</h1>
<input type="text"/>
<button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>оруулан өгөөд хөтөч дээрх хуудсаа харвал
тэгшитгэлийн нэг язгуур нь эерэг, нөгөө язгуур нь сөрөг байх параметрийн бүх утгыг ол.
Тэнцэтгэл бишийн нэг шийд нь M -ээс бага нөгөө шийд нь M -ээс их байх гарцаагүй ба хүрэлцээтэй нөхцөлийг ашиглавал 
болох бөгөөд энэ тэнцэтгэл бишийг бодвол 
үед манай тэнцэтгэл бишийн шийдийн нэг нь эерэг нөгөө нь сөрөг байна.
Нээгдсэн тоо : 1567
функц [1;9] завсарын аль хэсэгт буурах вэ?
функцийн хамгийн бага утгыг ол.