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

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

VueJS сангаар html -ийн элементүүдийг динамикаар удирдан өөрчлөхийн дээр түүнийг ашиглан том хэмжээний програмыг боловсруулж болох хүчирхэг хэрэгсэл. Эндээс том хэмжээний програмын кодын зохион байгуулалтыг хэрхэн үүсгэх вэ гэсэн асуулт гарч ирнэ. Том програмын ажиллагаануудыг сайн задлахын тулд тэдгээрийг төрөл бүрийн компонентуудад хуваах хэрэгцээ бий болох учраас бүх кодыг нэг javascript файлд агуулах боломжгүй болдог. Харин Vue CLI хэрэгслээр үүсгэсэн VueJS төсөл модулуудыг автоматаар ачааллах, төрөл бүрийн препроцессорууд дэмжих, сервертэй мэдээлэл солилцох API -тай ажиллах бэлэн сервесүүд гэх мэтээр олон боломжуудыг өгнө. Иймээс дараагийн хичээлүүдээр Vue CLI хэрэгслийг хэрхэн суулган ашиглахыг үзэх болно. Хэрэгслийг өөрөө сулгаж болох ч хугацаа, хүч хөдөлмөрийг хэмнэх үүднээс VueJS -ийн боловсруулагчид бидний өмнөөс бүхнийг бэлтгэн өгсөнг ашиглах нь илүү.  
Цаашхи хичээлүүдийн жишээг Vue CLI төслийг ашиглан хийх тул хэрэгслийг суулгах хэрэгтэй. Үүнээс гадна цаашид тодорхой сан, хэрэгслүүдийг суулгахад танд Node.js програм хэрэгтэй болно. Хэрвээ таны компьютерт Node.js суугаагүй бол зааврыг үзэн заавал суулгарай.

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

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

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

Javascript хэлийг ашиглахгүйгээр сайт зохионо гэдэг бүтэхгүй зүйл гэдэг нь ойлгомжтой. Сайтын хэрэглэгч талын хуудаст олон төрлийн javascript санг ашигладаг байсан бол одоо сайтыг бүгдийг javascript фреймворк ашиглан хийдэг SPA /single page application/ технологийг улам ихээр хэрэглэх болсон. Эдгээрийн нэг болох Vuejs сангийн хичээлүүдийг сайтад нийтэлж байгаа бөгөөд энэ удаад Vue -гийн хувийн тохиргооны обьектод data талбарт обьект тодорхойлж болж байхад яагаад компонентын хувийн тохиргооны обьектод data талбарт функц тодорхойлох ёстойг авч үзье. Компонентууд ямар хэрэгтэй вэ? хичээлийн жишээг

Функц ба хувьсагч

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

Функцын тухай ойлголт

Функц – гэдэг нь программын дурын хэсгээс дуудан ажлуулах боломжтой Javascript кодын хэсэг. Функцыг ашиглахын тулд түүнийг эхлээд тодорхойлох хэрэгтэй. Функц давтагдахгүй нэртэй байх ёстой. Нэр өгөх дүрэм нь хувьсагчийн нэрийг өгөх дүрэмтэй ижилхэн. Функцыг тодорхойлох бичлэг нь ерөнхийдээ доорх хэлбэртэй байна.

function <функцын нэр> ([<параметрүүдийн жагсаалт>])
{
     JavaScript оператор;
     JavaScript оператор;
     . . .
     JavaScript оператор;

     [return <Буцаах утга>]
}

Функцэд параметр дамжуулах

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

React -д үйл явцыг хэрхэн боловсруулах талаар гүнзгийрүүлэн судлая. Үүний тулд Car компонентийн кодод Дарах нэртэй товчийг

import React from 'react'

const car = props => <div>
  <h3>Машиний нэр: {props.name}</h3>
  <p>Он: <strong>{props.year}</strong></p>
  <button>Дарах</button>
</div>

export default car

нэмэн өгөөд хуудсаа харвал

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

Зөвлөмж: Хичээлийн материалыг бүрэн ойлгохын тулд React JS сан хичээлийн багцыг бүхэлд нь үзэхийг зөвлөе.

Параметрийн шалгалт

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

Хичээлээр компонент ирж буй параметрүүдэд шалгалт хийх боломжийн авч үзье. Төслийн App компонентоос Car компонентийг дуудаж буй кодийг

    ...
            <Car
              name={car.name}
              year={car.year}
              onDelete={this.deleteHandler.bind(this, index)}
              onChangeName={(event) => this.onChangeName(event.target.value, index)}
            />
    ...

аваад үзье.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

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

 
Бодлого 1.079

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

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

 
Бодлого 12.105

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

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

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