Компонентууд ямар хэрэгтэй вэ?

Програмын төслийг боловсруулахдаа системийн ажиллагааг бие даасан, бие биеэсээ үл хамаарах хэсгүүдэд хуваан хэсэгчлэн кодлон тестлэхийг сайн практик гэж үздэг. Vuejs санд энэ аргачлалыг хэрэгжүүлэх суурь технологи бол компонент юм. Ер нь Vue -гийн төсөл төрөл бүрийн компонентуудаас бүрддэг тул хичээлийн материалыг сайтар судлан ойлгон авахыг хичээгээрэй. Хичээлээр компонент гэж юу болох, ямар хэрэгтэй гээд компоненттой холбоотой асуудлуудыг авч үзье. Асуудлыг энгийнгээс эхлэн ойлгох үүднээс

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Компонент</title>
    </head>
    <body>
        <div id="app">

        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
            })
        </script>        
    </body>
</html>

агуулга бүхий html файлыг авч үзье. Файлд app айдитай div блок түүнтэй холбосон Vue -гийн хувийг үүсгэсэн кодыг бид өмнөх хэсгээс мэднэ. 

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

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

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

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

Vuejs фреймворкт роутингийг /чиглүүлэгч/ хийдэг vue router пакетыг vue-router -ийг суулгах хичээлээр төсөлдөө нэмэн суулгасан. Одоо хэрэглэгчийн сонгосон хаягаас хамааран дэлгэц дээр үзүүлэх хуудсуудыг бэлтгэх хэрэгтэй. Иймээс төслийн src хавтаст pages хавтасыг үүсгээд түүнд роутерийн утгаас хамааран үзүүлэх хуудас буюу компонентуудыг үүсгэн өгье. pages хавтаст

<template>
  <h1>Home page</h1>
</template>

<script>
export default {
    
}
</script>

<style scoped>

</style>

кодтой Home.vue

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

VueJs -ээр хуудас дээрээс өөр сайт руу шилжилт хийх техникийг авч үзье. Хуудас дээрээс e-surgalt.com сайт руу хандах холбоосыг байршуулаад түүгээр дамжин сайтад хандая гэвэл data талбарын обьектод url талбарыг зарлаад түүнд шилжих сайтын хаягаа өгөөд хуудасны кодод холбоосоор шилжих хаягаа {{ url }} гэж заасан

    <body>
        <div id="app">
            <h2>
                <a href="{{ url }}">E-surgalt</a>
            </h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    url: 'https:'
                }
            })
        </script>        
    </body>

дээрх агуулга бүхий кодыг бичэхэд болох мэт.

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

Та сайт боловсруулж байсан бол хэрэглэгч талын хуудаст javascript -ийг ашиглахгүйгээр олигтой үр дүнд хүрэхгүй гэдгийг ойлгосон байх. Сүүлийн жилүүдэд интернетэд сууриласан програмууд хэрэглэгч талын хуудасны бие даан ажиллах боломжид ихээхэн анхаарах болсон. Учир нь програмуудын хийж гүйцэтгэх ажлууд их болох тусам бүгдийг сервер тал хариуцах нь нилээд төвөгтэй болон ирдэг. Үүний зэрэгцээ хэрэглэгч талын компьютерийн хүчин чадал ихээхэн дээшилсэн нь зарим нэгэн ажиллагаануудыг хэрэглэгч талд хийх нь илүү үр ашигтай болсон. Иймээс л javascript хэлийг програм зохиогчдын заавал эзэмшсэн байх хэлүүдэд оруулаад байгаа хэрэг. ES6 -д бий болсон Set төстэй бас нэгэн бүтэц бол Map обьект юм. Set бүтэц массивтай төстэй бол харин Map бүтэц обьект хэлбэрийн. Map бүтцийг

let map = new Map();

map.set('name', 'e-surgalt');
map.set('age', 20);

console.log(map);

жишээн дээр судлая. map -ийг Map обьектын хувь байдлаар үүсгээд түүний set аргаар name, age талбаруудыг үүсгэн утга олгоод map -ийг консолд үзүүлбэл

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

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

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

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

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

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

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

Хоёр тойрог гадна талаараа шүргэлцсэн. Нэг тойргийн шүргэгч нь нөгөө тойргийнхоо төвийг дайран гарсан. Шүргэлтийн цэгээс хоёрдахь тойргийн төв хүртэлх зай нь энэ тойргийн радиусаас 3 дахин урт. Нэгдүгээр тойргийн урт хоёрдугаар тойргийн уртаас хэд дахин их вэ?

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

 

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

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

 

бол илэрхийллийн утгыг ол.

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