Vue фреймворкийн ээлжит хичээлээр форм дээрх тоон утгын талбаруудад v-model директивийг яаж ашиглахыг үзье. Жишээ нь форм дээрээс хэрэглэгчийн насыг авах хэрэгтэй болсон гэе. Үүний тулд
<template>
<div>
<h2>Form inputs</h2>
<input type="text" v-model="age">
<hr>
<p>{{ age }}</p>
</div>
</template>
<script>
export default {
data () {
return {
age: 20
}
}
}
</script>код байхад болох мэт.
Материалыг бүртгэлтэй хэрэглэгч үзнэ.
how_to_regБүртгүүлэхМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 1030 Нийтийн
Хичээлээр RxJs сангийн талаар өмнөх хичээлүүдээр олон авсан мэдлэгээ бататган API контактад хандан хэрэглэгчийн мэдээллийг авах энгийн програмыг боловсруулах болно. Програмаас төрөл бүрийн хүсэлтийг илгээх боломжтой болгох зорилгоор төсөлдөө Jquery санг суулгая. Үүний тулд WebStorm текст засварлагчийн терминалыг нээгээд
npm i jquery командыг өгөөрэй.
Нээгдсэн тоо: 1461 Бүртгүүлэх
Програмчлалыг реактив /reactive/ аргачлалаар боловсруулахад зориулагдсан Javascript дээр бичигдсэн Rxjs санг өөрийн програмдаа ашиглахын тулд түүнийг компьютертоо хэрхэн суулгахыг RxJs санг суулгах хичээлд хийсэн. Сан хэрхэн ажилладагийг харахын тулд index.js файлд сангийн хамгийн энгийн боломжийг үзүүлэх
var stream$ = Rx.Observable.create(function (observer) {
observer.next('нэг');
});кодыг оруулан өгье. Дээрх код stream буюу урсгал үүсгэж байгаа. RxJs санд стрим нь ердийн хувьсагч. JavaScript -д стрим мэтийн синхрон төрлийн хувьсагчийн нэрийн ард $ тэмдэг тавьдаг дүрэмтэй. Кодод стрим төрлийн stream$ хувьсагчид RxJs сангийн Observable классын create аргаар стрим үүсгэн олгосон байгаа.
Нээгдсэн тоо: 629 Бүртгүүлэх
Сервертэй ажиллах бэлтгэл хичээлээр төсөлд сервертэй ажиллах тохиргоог хийсэн тул vue-resource сангийн ажиллагаатай танилцгаая. Үүний тулд төслийн үндсэн комдонент App.vue файлд
<template>
<div class="container pt-2">
<div class="form-group">
<label for="name">Машины нэр</label>
<input type="text" id="name" class="form-control" v-model.trim="carName">
</div>
<div class="form-group">
<label for="year">Машины он</label>
<input type="text" id="year" class="form-control" v-model.number="carYear">
</div>
<button class="btn btn-success" @click="createCar">Машин үүсгэх</button>
</div>
</template>
<script>
export default {
data () {
return {
carName: '',
carYear: 2020
}
},
methods: {
createCar () {
console.log('Машин үүсгэх')
}
}
}
</script>кодыг оруулан өгье.
Нээгдсэн тоо: 477 Төлбөртэй
Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин зурагдсанг /render/ тодорхойлох асуудлаар авч үзье. Асуудлыг дараах
import React, {useState, useEffect} from 'react'
function App() {
const [renderCount, setRenderCount] = useState(1)
useEffect(() => {
setRenderCount(prev => prev + 1)
})
return (
<div className="container">
<h1>Render -ийн тоо {renderCount}</h1>
</div>
);
}
export default App;кодоор шийдчих мэт.
Задаргааны сүүлээсээ 3 дахь гишүүний бином коэффициент 45 бол 
задаргааны 6-р гишүүнийг ол.
Нээгдсэн тоо : 659
илэрхийллийг хялбарчил.