Өөрийн шалгагчийг үүсгэх

Форм дээрх контролуудыг Vuelidate пакетийн боломжийг ашиглан шалгахыг сурсан. Vuelidate пакетад олон тооны шалгагчид байгаа хэдий ч бид өөрсдийн шалгагчийг үүсгэх шаардлага гардаг. Жишээ нь шинэ хэрэглэгчийг бүртгэх форм хэрэглэгчийн цахим шуудангийн хаяг давтагдахгүй байхыг шалгах хэрэгтэй боллоо гэе. Өөрөөр хэлбэл манай өөрийн өгөгдлийн санд хэрэглэгчийн оруулсан цахим шуудангийн хаяг байгаа эсэхийг шалгах хэрэгтэй болсон гэсэн үг. Vuelidate пакетад манай өгөгдлийн санд хандан шалгалт явуулах шалгагч байхгүй гэдэг нь ойлгомжтой. Эндээс бид өөрсдийн шалгагч үүсгэхийг сурах хэрэгцээ гарч ирнэ.

Материалыг тусгай эрхтэй хэрэглэгч үзнэ.

request_quoteТусгай эрх авах

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

Холбоотой материалууд
template шинж

  Нээгдсэн тоо: 768 Нийтийн

VueJs програмыг арай өөрөөр инициализаци хийх аргыг авч үзье.

    <body>
        <div id="app">
            <h2 >{{ title }}</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Vue програм'
                }
            })
        </script>        
    </body>

кодод бид Vue -ийн хувийг app элементэд инициализац хийгээд app айдитай div -д title талбарт үзүүлж байгаа.

Хүүхэд компонент хоорондын холбоо

  Нээгдсэн тоо: 603 Нийтийн

Өмнөх хичээлүүдэд бид эцэг болон хүүхэд компонентууд хоорондын харилцан ажиллагааг судалсан. Одоо хүүхэд компонентууд буюу нэг түвшингийн компонентууд хоорондоо хэрхэн харьцах талаар үзье. Үүний тулд төслийн components хавтаст

<template>
  <div>
    <h1>Тоолуур: {{ counter }}</h1>
  </div>  
</template>

<script>
export default {
  props: ['counter']    
}
</script>

кодтой Counter.vue компонентийг үүсгэе. Counter компонент өөртөө ирэх параметрийн утгыг h1 тегд тоолуурын утгаар л үзүүлнэ.

Шинэ аргууд

  Нээгдсэн тоо: 1413 Нийтийн

EcmaScript 6 -гийн зарим обьектуудад шинээр бий болсон аргуудын талаар хичээлд авч үзье.

Обьектыг өргөжүүлэх

Обьектын өргөжүүлэлтийг хийх аргыг

let obj1 = {a: 1};
let obj2 = {b: 2, c: 3};

обьектууд дээр авч үзье. obj1 -ийг obj2 -оор өргөжүүлье гэвэл ES6 -д бий болсон assign аргыг

Object.assign(obj1,obj2);

ашигладаг. Аргад эхний параметрээр өргөжих /target/ обьектыг харин хоёрдахь параметрээр өргөжүүлэх /source/ обьектыг өгнө. Дээрх командын дараа

Хариултын боловсруулалт

  Нээгдсэн тоо: 118 Төлбөртэй

Хичээлээр хэрэглэгч сорилгын асуултын хариугаар сонгосон хувилбарын шалгалтын логикийн боловсруулалтыг хийе. Шалгалтыг Quiz компонентийн onAnswerClickHandler аргад

  const onAnswerClickHandler = (answerId) => {
    console.log("Хариултын Id:", answerId);
    if (quiz[activeQuestion].rightAnswerId === answerId) {
      const timeout = window.setTimeout(() => {
        if (isQuizFinished()) {
          console.log("Finished");
        } else {
          setActiveQuestion(activeQuestion + 1)      
        }
        window.clearTimeout(timeout);
      }, 1000);
    } else {
      
    }        
  };

  const isQuizFinished = () => {
    return activeQuestion === quiz.length - 1
  }

гэж хэрэгжүүлье. Дэлгэц дээрх асуулт бол quiz массивийн activeQuestion индекстэй элемент бөгөөд rightAnswerId талбарт зөв хариултын дугаар байгаа. Энэ утгыг onAnswerClickHandler функцэд параметрээр ирсэн answerId /хэрэглэгч сонгосон хариултын id/ -тэй тэнцэж буйг шалгана.

Лямбда

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 109

 
Outlet компонент

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 170

 
Хадгалагч (Memento)

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

…

Нээгдсэн тоо : 164

 
Нэргүй арга

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 174

 
Урвуу матриц

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 171

 
Кодийн сайжруулалт

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 257

 
Хуваах

Хуваах нь нэг тоо нөгөө тоонд хэдэн удаа агуулагдаж буй тодорхойлох арифметикийн үйлдэл.
Хуваалтыг нэг бус удаа…

Нээгдсэн тоо : 190

 
Зуучлагч (Mediator)

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр…

Нээгдсэн тоо : 190

 
Делегатийн хэрэглээ

Делегатууд хичээлд ухагдхууны талаар дэлгэрэнгүй үзсэн ч жишээнүүд делегатийн хүчийг бүрэн харуулж чадахааргүй байсан.…

Нээгдсэн тоо : 199

 
Энэ долоо хоногт
Бодлого 6.054

тэгшитгэлийг бод.

Нээгдсэн тоо : 916

 
Бодлого 8.074

Долоон хүнийг 2 ба 5 хүнтэй хоёр багт хуваах нийт боломжийн тоог ол.

Нээгдсэн тоо : 2449

 
Бодлого 9.134

Гадаад шүргэлтээр байрласан R ба r радиустай хоёр тойрогт дотоод ерөнхий болон гадаад хоёр шүргэгчийг татжээ. Гадаад шүргэгчдийн хооронд үүсэх дотоод шүргэгч дээрх хэрчмийн уртыг ол.

Нээгдсэн тоо : 804

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195