Чиглүүлэгч буюу url хаягт ямар параметрүүдийг дамжуулж болохыг үзье. Давхар чиглүүлэгчид хичээлд машины тухай дэлгэрэнгүй мэдээллийг
гэж харуулсан. Өөрөөр хэлбэл ямарч машиныг мэдээллийг CarFull компонентод шууд заасан байгаа.
Материалыг бүртгэлтэй хэрэглэгч үзнэ.
how_to_regБүртгүүлэхМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 1294 Төлбөртэй
Хичээлээр өөрийн контролийг үүсгэн түүнийг v-model директивт хэрхэн тавин өгөхийг сурцгаая. Үүний тулд төслийн components хавтаст Onoff нэртэй
<template>
<div>
<button class="on">On</button>
<button class="off">Off</button>
</div>
</template>
<script>
export default {
data () {
return {
enabled: false
}
}
}
</script>
<style scoped>
button {
border: none;
padding: 5px 15px;
cursor: pointer;
margin-right: 20px;
outline: none;
}
button:active {
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .5);
}
.on.active {
background: green;
color: #fff;
}
.off.active {
background: red;
color: #fff;
}
</style>код бүхий компонентийг үүсгээд түүнийг app компонентод бүртгүүлээд шаблонд
<template>
<div>
<h2>Form inputs</h2>
<app-onoff></app-onoff>
</div>
</template>
<script>
import Onoff from '@/components/Onoff'
export default {
data () {
return {
}
},
components: {
appOnoff: Onoff
}
}
</script>үзүүлье.
Нээгдсэн тоо: 1252 Төлбөртэй
Компонентууд хоорондоо холбогдон ажиллах шаардлага гарах нь мэдээж. Иймд хичээлээр компонентууд хоорондоо хэрхэн холбогдохыг авч үзье. Компонентыг Vue-д бүртгэх хичээлийн жишээнд App, Car хоёр компонентийг үүсгээд App компонентод Car компонентийг бүртгээд түүний темплейтийн суурь div дотор Car компонентийг оруулан ирсэн. Програмыг ажлуулбал
үр дүнг үзүүлж байгаа.
Нээгдсэн тоо: 1571 Нийтийн
Хичээлээр компонент хоорондын харилцан ажиллагааны бас нэгэн аргыг авч үзье. Доод шатны /хүүхэд/ компонентоос параметр дамжуулах хичээлд бид хүүхэд компонентод үйл явц үүсгээд түүнийг эцэг компонентод сонсохыг сурсан. Өөрөөр хэлбэл эцэг компонентод тодорхойлогдсон талбарын утгыг хүүхэд компонентоос өөрчилсөн. Үүнийг хийх бас нэгэн арга бий. Жишээ нь App компонентод
<script>
import Car from './components/Car.vue'
export default {
data () {
return {
carName: 'Toyota',
carYear: 2018
}
},
methods: {
changeCarName() {
this.carName = 'Benz'
}
},
components: {
appCar: Car
}
}
</script>Нээгдсэн тоо: 966 Бүртгүүлэх
Өмнөх Компонент гэж юу болох хичээлд бид react дээр програмийн кодийг бичихдээ react -ийг index.html файлд оруулан ирэн шууд ашигласан. Програмийн кодийг нэг файлд бүгдийг бичих, кодийг шалгах ажиллагаа, jsx -ийн компиляцийг хийхдээ babel санг нэмэлтээр оруулан ирэх зэрэг нь тийм сайн практик биш тул програм үүсгэх ажиллагааг автоматжуулсан хэрэгслийг react -ийг бүтээгчид боловсруулсан. Дурын хайлтын /жишээ нь google/ системээр create react app мөрийг хайлгавал хэрэгслийг эхний мөрүүдэд олон ирнэ.
интеграл бод
хязгаарыг бод.
утгыг ол.