Роутерийг тохируулах хичээлээр төсөлд Home, Cars хуудсуудыг үүсгэн чиглүүлэгчийг тохируулан бүртгүүлсэн хэдий ч хуудас хооронд шилжихдээ хаягийн мөрөнд шууд бичин өгч байгаа. Иймээс хуудас хоорондын шилжилтийг цэс үүсгэн түүгээр дамжуулан хийе. Та Формын шалгалтын бэлтгэл хичээлийг үзсэн бол төсөлд Bootstrap -ийг суулгасан гэдгийг мэдэж байгаа.
Материалыг тусгай эрхтэй хэрэглэгч үзнэ.
request_quoteТусгай эрх авахМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 597 Нийтийн
Төслийн нэгдсэн хадгалагчид програмын төлвүүдийг state -д үүсгэн ашиглахыг сурсан тул vuex -ийн дараагийн боломжийг судалцгаая. Одоогоор төслийн Actions компонентод байрлах товчнууд дээр дарах үйл явцын боловсруулагч state -д тодорхойлогдсон counter талбарын утгыг өөрчилнө. Харин Counter компонент state -ээс counter талбарыг аван темлейтдээ үзүүлж байгаа. Төсөлд бас нэгэн компонентийг нэмээд түүн дээр vuex -ийн дараагийн боломжийг судлая. Үүний тулд төслийн components хавтаст Counter компоненттой ижилхэн
<template>
<h2>Тоолуур 2: {{counter}}</h2>
</template>
<script>
export default {
computed: {
counter() {
return this.$store.state.counter
}
}
}
</script>кодтой SecondCounter.vue файлыг үүсгэе.
Нээгдсэн тоо: 809 Төлбөртэй
Програмд нэвтрэхэд хэрэглэгчийн нууц үгийг авах талбар ихэнхдээ байдаг. Ийм төрлийн талбарт шалгалтыг хэрхэн хийхийг сурцгаая. Үүний тулд Шалгалтын алдааг үзүүлэх хичээлийн App компонентийн шаблоны кодыг доорх байдлаар өргөжүүлье.
<template>
<div class="container">
<form action="" class="pt-4">
<div class="form-group">
...
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
class="form-control"
:class="{'is-invalid': $v.password.$error}"
@blur="$v.password.$touch()"
v-model="password"
>
</div>
</form>
</div>
</template>Нээгдсэн тоо: 641 Нийтийн
React -д үйл явцыг хэрхэн боловсруулах талаар гүнзгийрүүлэн судлая. Үүний тулд Car компонентийн кодод Дарах нэртэй товчийг
import React from 'react'
const car = props => <div>
<h3>Машиний нэр: {props.name}</h3>
<p>Он: <strong>{props.year}</strong></p>
<button>Дарах</button>
</div>
export default carнэмэн өгөөд хуудсаа харвал
гэж харагдана.
Зөвлөмж: Хичээлийн материалыг бүрэн ойлгохын тулд React JS сан хичээлийн багцыг бүхэлд нь үзэхийг зөвлөе.
Нээгдсэн тоо: 477 Бүртгүүлэх
Төсөлд vuex санг татан суулган store -ийг тохируулан өгсөн болохоор Vuex -ийг суулгах хичээлийн жишээний хүүхэд компонент хоорондын харилцан ажиллагаанд vuex -ийг ашиглан рефакторинг буюу сайжруулалтыг хийцгээе. Эхлээд компонентууд ямар өгөгдлүүдтэй ажиллах ёстойг store -д тодорхойлох хэрэгтэй. Иймээс store хавтаст index.js файлд
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
counter: 10
}
})дээрх өөрчлөлтийг оруулъя. Өөрчлөлтөөр Vuex.Store -ийн тохиргооны обьектод state талбарыг нэмсэн байгаа.
олон гишүүнтийн язгуурууд x1, x2, x3 (x1<x2<x3) бол
1. 
2. x1, x2, x3 арифметик прогрес үүсгэх бол 
3. Уул прогрессын ялгавар 
4. 
Нээгдсэн тоо : 1351
тэгшитгэлийг бод.
Жич: Бодох арга орж ирж байна уу. Найз нөхөд, багштайгаа хамжаад үзээрэй. Иймэрхүү бодлогууд сэтгэлгээг хөгжүүлэх, арга техникт суралцахад тустай.
Нээгдсэн тоо : 825