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БүртгүүлэхМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 734 Төлбөртэй
Энэ хичээлээс эхлэн react ашигладаг jsx бичлэгийн дүрмийн талаар дэлгэрүүлэн авч үзнэ. Өмнөх хичээлүүдэд хуудасны хэвийн тэмдэглэгээний jsx бичлэгийн дүрмийн үндсэн ойлголтуудыг үзсэн. Энэ удаад jsx гэж юу болох, хэрхэн ажилладагийг react програм үүсгэх хичээлд үүсгэсэн төслийн кодоор авч үзье. Бидний үүсгэсэн төслийн оролтын index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);файлд ReactDOM обьектын render аргад App нэрээр импортлон авсан App компонентийг эхний параметрээр дамжуулж байгаа.
Нээгдсэн тоо: 552 Бүртгүүлэх
Jsx нь html -тэй төстэй харагдах ч ердийн javascript бичлэг болох, хэрхэн ажилладагийг JSX хичээлээс мэдсэн тул Jsx -ээр хуудасны тэмдэглээг хийхэд ямар хязгаарлалт үйлчилдэг талаар авч үзье.
class App extends Component {
render() {
return (
<div className="App">
<h1>
Hello world!
</h1>
</div>
)
}
}Нээгдсэн тоо: 654 Бүртгүүлэх
Чиглүүлэгч буюу url хаягт ямар параметрүүдийг дамжуулж болохыг үзье. Давхар чиглүүлэгчид хичээлд машины тухай дэлгэрэнгүй мэдээллийг
гэж харуулсан. Өөрөөр хэлбэл ямарч машиныг мэдээллийг CarFull компонентод шууд заасан байгаа.
Нээгдсэн тоо: 1278 Нийтийн
Компонентыг бүртгүүлэх хичээлд компонентийн нэрийг 'my-counter' гэж мөр төрлөөр бичин өгсөн. Энэ нь зарим тохиолдолд асуудал үүсгэдэг. Жишээ нь та төсlлийн кодыг бичиж буй засварлагчид кодыг цэвэр байлгах ямар нэгэн хэрэгсэл /linter/ ашиглаж байвал нэрэнд хашилтыг хэрэглэвэл төслийн хэвээс хасагддаг тул үүнийг ашиглахгүй байх нь дээр. Иймээс VueJs -д компонентийн нэрийг үүсгэх өөр аргачлал байдаг. Компонентийн нэрийг өгөхдөө
new Vue({
el: '#app',
components: {
'my-counter': component
}
});хашилтанд my-counter гэж html кодод ашиглах тегийн нэрийг өгсөн байгаа.
Зурагт өгөгдсөн дотоод байдлаараа шүргэлцсэн хоёр тойргийн TA нь ерөнхий шүргэгч, TC нь том тойргийн огтлогч, жижиг тойргийн шүргэгч болно. DC=3, CB=2 бол TA -г ол.
Нээгдсэн тоо : 1059
тэгшитгэл бод.
тэгшитгэл бод.