Компонент гэж юу болох

React компонентод тулгуурладаг сан тул компонент гэж юу болохыг ойлгоцгооё. Үүний тулд машиний мэдээллийг үзүүлэх

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Lesson 01_02</title>
  <style>
    .car {
      display: inline-block;
      border: 2px solid #ccc;
      box-shadow: 2px 2px 1px #eee;
      padding: 10px;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <div class="car">
    <h3>Toyata Camry</h3>
    <p>Year: <strong>2019</strong></p>
  </div>
</body>
</html>

код бүхий html файлыг үүсгээд хөтөч дээр нээвэл

гэж харагдана.

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

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

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

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

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

Програмын төслийг боловсруулахдаа системийн ажиллагааг бие даасан, бие биеэсээ үл хамаарах хэсгүүдэд хуваан хэсэгчлэн кодлон тестлэхийг сайн практик гэж үздэг. 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 -гийн хувийг үүсгэсэн кодыг бид өмнөх хэсгээс мэднэ. 

Сумаар тодорхойлогдох функц

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

Сүүлийн жилүүдэд javascript фреймворкууд эрчимтэй хөгжснөөр интернетэд сууриласан програм, сайтын хэрэглэгч талын интерфесийг javascript -ээр бүтээх хандлага давамгайлах болоод байгаа. Ялангуяа SPA буюу нэг хуудас аплликашн технологи маш эрчимтэй орон ирсэн. Энэ хандлага ирээдүйдээ ч нилээд олон жил байр сууриа алдахгүй болов уу. Иймээс програмчлалын чиглэлээр суралцаж байгаа болон ажиллаж буй залуучууд javascript хэлийг эзэмшсэн өөрийн ажлын хэрэгсэл болгохыг хичээнгүйлэн зөвлөе.  

Энэ хичээлд ES6 -д шинээр бий болсон бүтэц буюу сумаар тодорхойлогдох функцтэй танилцая. Энэ нь өмнө байсан функцуудын нэгэн адил функц ч гэсэн зарим нэгэн онцлогтойг жишээгээр харцгаая. Өмнөх хувилбарт функцийг

const original = function () {
    return 100;
};

console.log(original());

дээрх байдлаар function түлхүүр үгийг ашиглан зарладаг. Кодод 100 утгыг буцаах функцийг зарлаад түүнийг original тогтмолд олгоод дараа нь түүнийг консолд үзүүлэхээр дуудсан.

Формийг илгээх

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

Өмнөх хичээлүүдэд хэрэглэгчийн оруулсан эмайл, нууц үгэнд шалгалт хийх формыг зохиогоод байгаа. Өөрөөр хэлбэл бид бүртгэлийн формийг үүсгэсэн. Одоо формдоо түүнийг илгээх товчийг нэмвэл бүрэн хэмжээний ажиллагаатай болохоор байгаа. Иймээс формийн хэвд хамгийн сүүлийн form-group класстай div -ийн ард

<template>
  <div class="container">
    <form action="" class="pt-4">
      ...    
      <button class="btn btn-success">Submit</button>            
    </form>
  </div>
</template>

bootstrap -ээр хэвжүүлсэн Submit товчийг нэмэн оруулаад хуудсаа шинэчилбэл

Math обьект

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

Математикийн тогтмолууд болон математик тооцоолол хийх аргууд болон шинжүүдийг агуулсан дотоод обьект юм. Array, Date обьектуудаас ялгаатай нь хуулбар үүсгэх боломжгүй. Иймээс Math обьектын хуулбар үүсгэх албагүй байдаг бөгөөд үүнийг хөрвүүлэгч өөрөө хийдэг. Жишээ нь 10 -аас квадрат язгуур авах хэрэгтэй боллоо гэхэд Math обьектын sqrt() аргыг шууд ашиглаж болно.

    var root = Math.sqrt(10);    //  10 -ын квадрат язгуур
    document.write("Math.sqrt(10) = " + Math.sqrt(10) + "<br />");

Статик гишүүд…

Класс ба структурт ердийн талбар, арга, шинжүүдээс гадна статик талбар, арга, шинжүүд байж болдог. Статик талбар, арга, шинжүүд…

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

 
useRef

Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин…

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

 
Тоог ихэсгэх

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

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

 
Графикийн паттерн.…

Нийтлэлээр графикийн хэвүүдийн /GUI pattern/ түүхийг авч үзье. Боловсруулалтын графикийн хэвүүдийг 30 гаруй жилийн туршид боловсруулж байгаа бөгөөд…

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

 
Аргын хэт…

Хааяа өөр өөр параметрүүдийн багцтай нэг аргыг үүсгэх шаардлага гардаг. Ирсэн параметрүүдээс хамааран аргын тодорхой хэрэгжүүлэлтийг хэрэглэнэ. Ийм…

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

 
Vuex -ийг…

Ямарч програмын ажиллагааны чухал хэсэг бол төрөл бүрийн мэдээллийн боловсруулалт, тэдгээртэй ажиллахтай холбоотой байдаг. Иймээс энэ хичээлээс vuejs…

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

 
useEffect

Хичээлээр react -ийн хукуудаас их өргөн ашиглагддаг useEffect -ийн талаар авч үзье. useEffect -ийн ажиллагааг судлах хуудасны кодийг

…

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

 
Тоон болон…

Илэрхийлэл бол математикийн хэлний үндэс болсон суурь ойлголтуудын нэг. Математикийн илэрхийллийг тооцооны алгоритм, аксиом, теорем, бодлогын нөхцлүүд гээд…

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

 
Програмчлалын хэвүүд…

Програм зохиох бол нарийн төвөгтэй ажил. Ямар ч програмын хувьд өөрийн хийх ажлаа гүйцэтгэхийн чацуу цаашдаа хөгжих, ажлын…

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

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