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

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

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

Холбоотой материалууд
Сонголтууд

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

Програмчлалын хэлүүдийг хамгийн сайн, хүчирхэг гэх мэтээр рейтенг гарган сургалтад ашиглах гээд байх шиг харагддаг. Эрэлт өндөртэй хэлүүдийг сургалтын суурь болгон ашиглах ёстой. Гэхдээ юунаас эхлэх, ямар програмаар яван хир бэлтгэгдсэн мэрэгжилтэн гаргах төлөвлөгөөтэй байхгүй бусдын жишгээр эсхүл моод хөөцөлдвөл ямарч чадваргүй мэргэжилтэнээр л дүүрэх байх. Гол анхаарах зүйл бол ямар хэлийг эзэмшсэн мэрэгжилтэн өндөр эрэлттэй, цалин хөлс сайтай, ирээдүйтэй вэ гэдгийг л сайн ажиглаж байх хэрэгтэй. Сүүлийн жилүүдэд програм зохиох технологид олон зүйлүүд шинээр орон ирснээр frontend програм зохиогчидын эрэлт тасралтгүй нэмэгдсээр байгаа. Энэ бол та javascript хэлийг судлах ёстойг зааж буй чиг. Иймээс сайтын javascript хэлний хичээлүүдийг үзэхийг санал болгоё.

Хуудас дээрх формоос хэрэглэгч жагсаалтаас сонголт хийн ажиллах тохиолдол олон. Иймээс энэ хичээлээр формын бас нэгэн чухал элемент болох сонголтын select тегийг

<template>
  <div>
    <h2>Form inputs</h2> 
    <select>
      <option v-for="s in socialsList"> {{ s }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data () {
    return {
      socialsList: ['instagram', 'twitter', 'facebook']
    }
  }
}
</script>

жишээгээр авч үзье.

Роутерийг тохируулах

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

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

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

<script>
export default {
    
}
</script>

<style scoped>

</style>

кодтой Home.vue

CLI ямар хэрэгтэй вэ?

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

Хичээлээр Vue CLI гэж юу болох, юунд ашиглах, яагаад мэдэх хэрэгтэй тухай авч үзье. Vue CLI бол VueJS төслийг маш хурдан, эвтэйхэн байдлаар үүсгэн ашиглахад зориулагдсан хэрэгсэл. Бид өмнөх хичээлүүдэд html файлд VueJS санг оруулаад түүнийг ашиглаж болж байхад VueJS дээр бүтэн төсөл үүсгэх ямар шаардлагатай гэж бодож байж болно.

Динамик өгөгдлийг харуулах

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

Өмнөх хичээлүүдэд үүсгэсэн App, Car компонентууд өөрийн статик агуулгуудыг л хуудаст харуулж байгаад бага зэргийн динамик ажиллагааг оруулах гээд үзье. Компонентийн агуулгын хэсэг jsx бичлэгийн дүрмээр бичигдсэн javascript код учраас бид түүнд динамик ажиллагааг оруулахад төвөггүй мэт. Иймээс Car компонентийн кодийг

import React from 'react'

const car = () => <div>
  <p>This is car component</p>
  <p><strong>1+1</strong></p>
</div>

export default car

гэж өөрчлөөд хуудсаа харвал

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

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

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

 
Бодлого 2.167

илэрхийллийн x=3 утгыг ол.

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

 
Бодлого 9.149

16 см суурьтай, 10 см хажуу талтай адил хажуут гурвалжин өгөгджээ. Гурвалжинд багтсан болон гурвалжинг багтаасан тойргуудын радиус болон тойргуудын төв хоорондын зайны нийлбэрийг ол.

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

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