CSS классуудтай ажиллах

Хэрэглэгч талын хуудасны динамик ажиллагааг үүсгэн удирдахад зориулагдсан javascript фреймворкууд интернет програмчлалд улам хүчтэй түрэн орж ирж байгаа тул технологийн хөгжлөөс хоцрохгүй байх үүднээс VueJs фреймворкийн хичээлүүдийг нийтэлж байгаа билээ. Энэ удаад VueJs -ийг ашиглан програмаа хэрхэн хэвжүүлэхийг доорх энгийн кодоор

<!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"></div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                }
            })
        </script>
    </body>
</html>

судлая. Кодын head хэсэгт style тэгд хэвүүдийг бичин өгөөд хэвийг ашиглах circle класстай нэг div -ийг тодорхойлсон. Хуудсыг хөтөч дээр нээвэл

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

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

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

Холбоотой материалууд
State -ийг ашиглах

  Нээгдсэн тоо: 462 Бүртгүүлэх

Төсөлд vuex санг татан суулган store -ийг тохируулан өгсөн болохоор Vuex -ийг суулгах хичээлийн жишээний хүүхэд компонент хоорондын харилцан ажиллагаанд vuex -ийг ашиглан рефакторинг буюу сайжруулалтыг хийцгээе. Эхлээд компонентууд ямар өгөгдлүүдтэй ажиллах ёстойг store -д тодорхойлох хэрэгтэй. Иймээс store хавтаст index.js файлд

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 10
  }
})

дээрх өөрчлөлтийг оруулъя. Өөрчлөлтөөр Vuex.Store -ийн тохиргооны обьектод state талбарыг нэмсэн байгаа.

Товч компонент

  Нээгдсэн тоо: 351 Бүртгүүлэх

Сорилгын үр дүнгийн QuizResult компонентод сорилгыг дахин эхлүүлэх товч байгаа. react -ийг зохиогчид  програмийг компонент дээр суурилан хийх аргачлалыг уриалдаг учраас сорилгыг дахин эхлүүлэх товчийг тусд нь компонент байдлаар боловсруулъя. Үүний тулд төслийн components хавтаст UI нэртэй хавтасыг үүсгээд түүнд Button хавтасыг үүсгэе. UI гэдэг нь /user interface/ буюу хэрэглэгч талын дэлгэцийн төрөл бүрийн элементүүдийг үзүүлэх компонентуудыг агуулах юм. Button хавтас бол дэлгэц дээр үзүүлэх товчны компонентийн хавтас бөгөөд түүнд Button.js, Button.module.css үүсгэн өгөөрэй.

ErrorBoundary

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

react 16 гаас дээш хувилбарт бий болсон кодод үүссэн алдаануудыг илүү эвтэйхэн боловсруулахад зориулагдсан ErrorBoundary амьдралын шинэ циклийн талаар судлая. ErrorBoundary аргыг туршихын тулд төслийн src хавтас ErrorBoundary хавтаст үүсгээд

import React from 'react'

export default class ErrorBoundary extends React.Component {
  state = {
    hasError: false
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true })
  }

  render() {
    if (this.state.hasError) {
      return <h2 style={{ color: 'red' }}>Алдаа гарлаа</h2>
    }
    return this.props.children
  }
}

код бүхий шинэ ErrorBoundary компонентийг үүсгэе.

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

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

Өмнөх хичээлүүдэд үүсгэсэн 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/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

функцийн тодорхойлогдох мужийг ол.

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

 
Бодлого 6.052

Арифметик прогресын 3-р гишүүн 5, 7-р гишүүн 13 бол эхний 10 гишүүний нийлбэрийг ол.

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

 
Бодлого 3.134

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

Жич: Тэгшитгэлийг заавал бодох гээд үзээрэй. Иймэрхүү бодлого ЭЕШ -д бараг ирэхгүй ч математикийг ганцхан ЭЕШ -аар хязгаарлавал та өөрийгөө хөгжүүлэхээ боомилсонтой адил.

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

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