Формын өгөгдөлд шалгалт буюу validation хийх ажиллагаа ямарч програмын хувьд чухал хэсэг байдаг тул материалыг анхааралтай судлан ойлгон автлаа үзээрэй. Формын шалгалтуудад ашиглах төслийг Формын шалгалтын бэлтгэл хичээлд үүсгэн Vuelidate пакетийг суулган цахим шуудангийн хаягийг авах талбарыг нэмсэн. Одоо формын шалгалтад Vuelidate пакетийг хэрхэн ашиглахыг сурцгааж эхлэе.
Материалыг тусгай эрхтэй хэрэглэгч үзнэ.
request_quoteТусгай эрх авахМэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.
Нээгдсэн тоо: 1145 Төлбөртэй
Хичээлээр өөрийн контролийг үүсгэн түүнийг 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>үзүүлье.
Нээгдсэн тоо: 4774 Бүртгүүлэх
JavaScript-ийн өгөгдлийн төрлүүд
Хувьсагч гэдэг нь компьютерын санах ойд хадгалагдаж байгаа тодорхой утгыг заах нэр юм. JavaScript –д зарлаж байгаа хувьсагчийн төрлийг урьдчилан заах хэрэггүй хэл хувьсагчийн төрлийг өөрөө тодорхойлдог. Бүхэл болон бутархай тоонуудад илт ялгагдах ялгаа бараг байхгүй. JavaScript доорх төрлүүдийг таньдаг.
| Төрөл | Нэр | Тодорхойлолт |
| Number | Тоо | 16, 10, 8 тооллын системийн бүхэл, бутархай тоонууд |
| String | Мөр | Хашилтанд байх тэмдэгтүүд |
| Boolean | Логик | True ба False байх логик утгууд |
| Function | Функц | Функцын холбоос |
| Object | Обьект | Обьект , массив болон Null утгатай хувьсагчид |
Нээгдсэн тоо: 771 Төлбөртэй
Хичээлээр Vue -гийн обьект гэж юу болох түүний хувиудыг хэрхэн удирдах талаар авч үзье. Үүний тулд хуудаст h2 гарчиг түүнийг өөрчлөх товчийг агуулсан
<body>
<div id="app">
<h2>{{ title }}</h2>
<button @click="title = 'Гарчиг өөрчлөгдсөн'">Гарчиг өөрчлөх</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
title: 'Vue -гийн хувь'
}
})
</script>
</body>энгийн кодыг харцгаая. Кодод app нэртэй id -тай div элементэд Vue -гийн нэг хувийг тодорхойлсон байгаа.
Нээгдсэн тоо: 366 Бүртгүүлэх
Програмийн цэсийн хэрэгжүүлэлтийн компонентийг хийсний дараа хуудсаа нээгээд fa-bars икон дээр дарахад
дээрх байдлаар харагдаж байгаа. Харин цэсийг эргэн харагдахгүй болгох ажиллагааг fa-times буюу x дүрс хариуцаж байгаа. Цэсийг хаах ажиллагаа fa-times буюу x дүрс дээр дарах үйл явцын боловсруулагчаас гадна цэсний гадна талд дарахад хийгддэг байвал ашиглалтын талаасаа илүү эвтэйхэн гэдэг нь ойлгомжтой.
илэрхийллийг хялбарчил.