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БүртгүүлэхМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 695 Төлбөртэй
Формийн шалгалтын ажиллагаануудтай үргэлжлүүлэн танилцая. Валидаторийг тохируулах хичээлийн жишээнд $v обьектод байгаа email түлхүүртэй обьектийг дэлгэц дээр харуулан цахим шуудангийн хаягийн талбарт оруулж буй өгөгдлүүд шалгагчийн төлөвт хэрхэн нөлөөлж байгааг ажигласан. Бодит жишээнд {{ $v.email }} бүтцийг ашиглаад байх нь тохиромжгүй тул түүнийг шаблоны кодоос
<template>
<div class="container">
<form action="" class="pt-4">
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
class="form-control"
@blur="$v.email.$touch()"
v-model="email"
>
</div>
</form>
</div>
</template>хасаад хуудсаа хөтөч дээр нээвэл
ердийн формийг үзүүлнэ.
Нээгдсэн тоо: 1949 Төлбөртэй
Обьектыг үүсгэх
String обьект нь энгийн тэмдэгтийн төрөлд харгалзах хэлний дотоод обьект юм. Обьект мөрийг шалгах, хэсгийг таслан авах, том жижиг үсгэнд шилжүүлэх гээд олон тооны аргуудтай. Энэ хичээлээр бид String обьектын ихээр хэрэглэдэг аргуудын талаар авч үзэх болно. String() конструктур нь анхны утгыг заан өгөх заавал байх шаардлагагүй параметртэй. Обьектыг үүсгэх жишээнүүд
var s = new String();
var head1 = new String("JavaScript хичээлүүд");Нээгдсэн тоо: 894 Төлбөртэй
RxJs санг ашиглах хичээлд бид стримийг өөрсдөө үүсгэсэн бол энэ хичээлд Javascript -ийн бэлэн обьектоос буюу үйл явцаас стримийг /урсгал/ хэрхэн үүсгэх талаар үзье. Үүний тулд index.html файлд товчийг
...
<body>
<button>Дарах</button>
<script src="node_modules/rxjs/bundles/rxjs.umd.min.js"></script>
<script src="index.js"></script>
</body>
...үүсгэн өгөөд товч дээр дарах үйл явцаас стрим үүсгэхийн тулд index.js файлд
var button = document.querySelector('button');
var btn$ = Rx.Observable.fromEvent(button, 'click');кодыг оруулан өгье.
Нээгдсэн тоо: 448 Нийтийн
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 сан хичээлийн багцыг бүхэлд нь үзэхийг зөвлөе.
илэрхийллийн хялбарчил.