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

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Тусгай эрх авах

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

Холбоотой материалууд
Үйл явцаас урсгал /stream/ үүсгэх

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

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');

кодыг оруулан өгье.

Шалгалтын алдааг үзүүлэх

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

Формийн шалгалтын ажиллагаануудтай үргэлжлүүлэн танилцая. Валидаторийг тохируулах хичээлийн жишээнд $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>

хасаад хуудсаа хөтөч дээр нээвэл

ердийн формийг үзүүлнэ.

Хожуу /залхуу/ ачаалалт

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

Vuejs програмын ажиллагааг хожуу ачаалалт буюу lazy loading технологийг ашиглан оптимизаци хийх боломжийн тухай хичээлээр авч үзье. Өмнөх хичээлүүдэд хийгдэж байсан жишээ програмуудын Cars, Car, CarFull гэх мэт компоненнтууд болон төслийн бусад js файлууд npm run serve командаар компиляц хийгдэхэд бүгд нийлэн нэг файл болж байсан.

useContext

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

Javascript хэл сайтын хэрэглэгч талын буюу frontend хэсгийн програмчлалд хүчтэй түрэн орж ирлээ. Орчин үед хэрэглэгч талын хуудасыг SPA буюу нэг хуудаст аппликашн байдлаар хэрэгжүүлэх хандлага түлхүү зонхилох болсноор frontend кодлогчийн өндөр түвшинд эзэмшсэн байх зүйл бол Javascript болон түүнд дээр зохиогдсон фреймворкууд яалтгүй болоод байгаа. Ямар нэгэн зүйлийг өнгөцхөн судлаад өнгөрөх нэг хэрэг. Харин тухайн зүйлээ сайн эзэмших тийм ч амаргүй. Байнга суралцан судлах хэрэгтэй. Та frontend кодлогч болохоор шийдсэн бол сайтад нийтлэгдсэн хичээлүүдийг үзэхийг хичээнгүйлэн зөвлөе.     

useContext хукийн ажиллагааг судлахын тулд жижиг хэмжээний програмийг зохиоцгооё. Програмийн суурь бүтцийг App компонентод

import React from 'react'
import Alert from './Alert';
import Main from './Main';

function App() {
  return (
      <div className="container pt-3">
        <Alert />
        <Main />
      </div>
  );
}

export default App;

байдлаар зохион байгуулъя.

Үйл явдал…

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

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

 
Холбоосын параметрүүд

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

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

 
Бодлого 1.079

[-252; 299) завсарт орших 18 -д үлдэгдэлгүй хуваагдах тоонуудын нийлбэрийг ол.

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

 
Бодлого 12.105

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

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

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