Жагсаалттай ажиллах

Төслийн App компонентийн кодыг харвал

class App extends Component {

  state = {
    cars: [
      { name: 'Toyata Prius', year: '2018' },
      { name: 'Toyata Camry', year: '2019' },
      { name: 'Ford', year: '2015' }
    ],
    pageTitle: 'App компонент'
  }

  changeTitleHandler = (newTitle) => {
    this.setState({
      pageTitle: newTitle
    })
  }

  ChangeHandle = (event) => {
    this.setState({
      pageTitle: event.target.value
    })
  }

  render() {
    const divStyle = {
      textAlign: 'center'
    }

    const cars = this.state.cars

    return (
      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>

        <input type="text" onChange={this.ChangeHandle} />

        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>
        <Car
          name={cars[0].name}
          year={cars[0].year}
          onChangeTitle={this.changeTitleHandler.bind(this, cars[0].name)}
        />
        <Car
          name={cars[1].name}
          year={cars[1].year}
          onChangeTitle={() => this.changeTitleHandler(cars[1].name)}
        />
        <Car
          name={cars[2].name}
          year={cars[2].year}
          onChangeTitle={() => this.changeTitleHandler(cars[2].name)}
        />
      </div>
    )
  }
}

болсон байгаа.

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

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

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

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

Хичээлээр Үр дүнгийн компонент хичээлээр хийсэн компонентод динамик ажиллагааг хэрэгжүүлве. Өөрөөр хэлбэл сорилгын үр дүнг динамикаар үзүүлэх юм. Үүний тулд Quiz компонентод

const [results, setResults] = useState({})

сорилгын үр дүнгийн results төлвийг нэмэн өгье. results обьект үр дүнг {[асуултын_id]: хариултын_төлөв} хэлбэрээр агуулна. Өөрөөр хэлбэл хариултын төлөв талбарт хариулт зөв бол right буруу бол wrong утгыг агуулах юм.

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

Интернетэд сууриласан буюу хөтөч дээр ажилладаг програмуудын хэрэглэгчийн дэлгэцийг бүрэн удирдах боломжийг олгодог нь Javascript хэлний нэг давуу тал. Хэрэглэгч талын дэлгэцийг css хэвүүд ашиглан хэвжүүлдэг ч тэдгээрийг динамикаар удирдах хэрэгцээ зайлшгүй гардаг. Хичээлээр хуудасны элементүүдийн хэвийг css классууд ашиглахгүйгээр элементийн бичлэгт динамикаар оруулахыг CSS классуудтай ажиллах хичээлийнхтэй төстэй

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
        <style>
            .circle {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 1px solid black;
                display: inline-block;
                margin: 40px;
            }

            .red {background: red;}
            .blue {background: blue;}
            .green {background: green;}
        </style>
    </head>
    <body>
        <div id="app">
            <div class="circle" :style="{'background': color}"></div>
            <div class="circle"></div>
            <hr>
            <input type="text" v-model="color">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    isActive: false,
                    color: 'blue'
                }
            })
        </script>
    </body>
</html>

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

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

Өмнөх хичээлүүдэд React сан хэрхэн ажилладаг, create react app хэрэгсэл, хуудасны хэвийн бичлэгийн Jsx дүрмүүдтэй танилцан тэдгээрийн ажиллагааг жишээнд дээр судлан танилцсан бол одоо сангийн өөрийнх нь ажиллагаануудтай дэлгэрэнгүй танилцгаая. Эхлээд create react app хэрэгслээр үүсгэсэн төслийн үндсэн компонент болох App -аас өмнөх хичээлд судалсан зарим ойлголтуудын жишээ кодийг

class App extends Component {
  render() {
    const divStyle = {
      textAlign: 'center'
    }
    return (
      <div style={divStyle}>
        <h1>
          Hello world!
        </h1>
        <Car name={'Toyata Prius'} year={'2018'} />
        <Car name="Toyata Camry" year={'2019'} />
        <Car name={'Ford'} year={'2015'} />
      </div>
    )
  }
}

хасан цэвэрлэе.

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

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

Хоёр ажилчин хамтарч ажиллавал даалгаварыг 2 цаг 48 минутад биелүүлж чадна. Дангаараа ажиллавал нэгдүгээр ажилчин хоёрдугаараасаа 4 цаг 12 минутын өмнө даалгаврыг биелүүлнэ. Тэгвэл тэд дангаараа ажиллавал: Нэгдүгээр ажилчин цагт, хоёрдугаар ажилчин цагт даалгаврыг гүйцэтгэнэ.

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

 

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

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

 

Тойргийн диаметрт тулсан багтсан өнцөг хэдэн градустай тэнцэх вэ?

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