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

Өмнөх хичээлүүдэд үүсгэсэн 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

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

гэж харагдана. javascript -д 1+1 -г уул нь 2 гэж үзүүлэх ёстой байтал хуудаст ердийн статик текст байдлаар харуулсан. jsx -д 1+1 -г javascript код гэдгийг хэрхэн ойлгуулах вэ гэвэл түүнийг {} хаалтанд авах хэрэгтэй. Тэгвэл jsx хаалтан дахь хэсгийг javascript код гэж үзэн түүнд үйлдэл хийх болно. Өөрөөр хэлбэл кодийг

import React from 'react'

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

export default car

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

гэж харагдана. {} хаалтанд javascript -ийн энгийн функцийг ч

const car = () => <div>
  <p>This is car component</p>
  <p><strong>{Math.random()}</strong></p>
</div>

өгч болно. Өөрчлөлтийг хадгалаад хуудсаа харвал

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

class App extends Component {
  render() {
    const divStyle = {
      textAlign: 'center'
    }
    return (
      <div style={divStyle}>
        <h1 style={{ color: 'blue', fontSize: '20px' }}>
          Hello world!
        </h1>
        <Car />
        <Car />
      </div>
    )
  }
}

хоёр оруулан ирвэл

компонент бүр өөрийн санамсаргүй тоог тооцон гаргах болно. {} хаалтанд javascript -ийн энгийн функц, илэрхийллийг өгөн тооцоо хийлгэхийг

import React from 'react'

const car = () => <div>
  <p>This is car component</p>
  <p>Number: <strong>{Math.round(Math.random()*100)}</strong></p>
</div>

export default car

жишээгээр харуулъя. {} хаалтанд javascript -ийн энгийн функц, илэрхийллийг өгөн тооцоо хийлгэх дадлагыг өөрсдөө хийн туршин үзээрэй.

Зөвлөмж: Суралцах нь тийм амар ажил биш ч гэлээ хүн өөрийгөө дайчилж чадвал юуг сурах чадвартай. Сайтын програмчлалтай холбоотой хичээлүүдээс та тухайн хэлний анхан шатны баттай суурь мэдлэгтэй болно гэдгийг баттай хэлэх байна. Програмчлалын хэлийг дээд сургуульд л заадаг гэж буруу ойлгож болохгүй. Програмчлалын хэлийг ЕБС -ийн 7, 8 -р ангиас эхлэн судлан суралцах бүрэн боломжтой. Програмийн код бичих, програм зохиох ажилд хийсвэр сэтгэлгээ, юмыг олон талаас нь ухан ойлгох, өөрөө суралцах чадвар нэн чухал. Энэхүү чадваруудыг танд суулгах нь манай сайтын үндсэн үүрэг. Аливаа зүйлийн суурь онолыг судлахгүйгээр шууд практикт ашиглах гэж оролдох нь тун хэцүү болоод үр дүн муутай. Иймээс эхлээд суурь ухагдхуунуудыг судлан ойлгоод дараа нь түүнийгээ бодит ажилд хэрэглэж сураарай. Эзэн хичээвэл заяа дагана гэдэг тул танд ч бас боломж бүрэн байгаад итгээрэй.     

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

Холбоотой материалууд
Формтой ажиллах модел

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

Хэрэглэгч програмын өгөгдөлтэй харьцах ажиллагаа бол ямарч програмыг хувьд чухал хэсэг байдаг. Үүнийг голдуу формоор дамжин хийдэг. Иймээс энэ удаа VueJs -ээр төрөл бүрийн input элементүүдтэй хэрхэн ажиллахыг

    <body>
        <div id="app">
            <input type="text">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {

                }
            })
        </script>
    </body>

кодоор авч үзье. Кодод хэрэглэгчээс өгөгдөл авах input элемент div id="app" элементэд Vue -гийн хувийн инициализац хийсэн байгаа. Хуудсыг нээвэл ердийн input талбар л үзэгдэнэ. Тэгвэл input элементэд ямар нэгэн зүйлийг оруулахад түүнийг хуудасны шаблонд шууд харуулах асуудлыг шийдье.

useRef

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

Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин зурагдсанг /render/ тодорхойлох асуудлаар авч үзье. Асуудлыг дараах

import React, {useState, useEffect} from 'react'

function App() {
  const [renderCount, setRenderCount] = useState(1)
  
  useEffect(() => {
    setRenderCount(prev => prev + 1)
  })
  
  return (
      <div className="container">
        <h1>Render -ийн тоо {renderCount}</h1>
      </div>
  );
}

export default App;

кодоор шийдчих мэт.

DOM -ийн элементэд хандах

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

html хуудас бүхэлдээ DOM /document object model/ буюу хуудасны обьектын моделоос бүрддэг. Хуудас дээрх элементүүдэд хандан тэдгээрийг удирдах асуудал хэрэглэгч талын хуудастай ажиллах ажиллагаанд чухал байр суурийг эзэлдэг. Иймээс VueJs -ээр html хуудасны элементүүдэд хэрхэн хандахыг авч үзье. Html элементүүдэд хандах ref буюу reference гэдэг бүтэц бий. Хичээлд

    <body>
        <div id="app">
            <h2>{{ title }}</h2>
            <button @click="updateFirstTitle">Гарчиг өөрчлөх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Vue -гийн хувь'
                },
                methods: {
                    updateFirstTitle(){
                        this.title = "Шинэ гарчиг"
                    }
                }
            })
        </script>        
    </body>

h2 гарчиг түүний утгыг солих Гарчиг өөрчлөх товч бүхий хуудсыг ашиглана. Гарчиг өөрчлөх товчийг дарахад title хувьсагчийн утгыг Шинэ гарчиг болгон өөрчлөх updateFirstTitle функц дуудагдана. Хуудасны ажиллагааг шалган үзээрэй.

Амьдрах цикл

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

Vue -ийн хувийн амьдралын мөчлөгийн талаар авч үзье. Vue -гийн хувь бүрд өөрийн гэсэн амьдралын мөчлөг байдаг бөгөөд тодорхой  үе шатуудыг ажиглах боломжтой. Програмын амьдрах мөчлөгийн үе шатуудыг

    <body>
        <div id="app">
            <h2>{{ title }}</h2>
            <button @click="title = 'Гарчигийг өөрчлөв'">Гарчигийг өөрчлөх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Vue програм'
                }
            })
        </script>        
    </body>

кодоор авч үзье. Код хуудаст title талбарыг үзүүлээд Гарчигийг өөрчлөх товчийг дарахад title талбарын утгыг өөрчлөнө. Бид ажиглалт хийж болох эхний үе шат бол Vue програмын инициализац юм. new Vue({ ... }) командаар Vue програмын инициализац хийгдэх боловч хэрэглэгч хуудсыг харах хүртэл хэдэн шатыг дамждаг.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

KLM суурьтай, KL=1, KK1=d талтай KLL1K1 тэгш өнцөгт хажуу бүхий KLMK1L1M1 призм өгөгджээ. KL_|_KM, LMM1 , KMM1 хавтгайнуудын хоорондын өнцөг 60°, бол утганд призмд түүний бүх талыг шүргэх шаарыг багтааж болно.

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

 
Бодлого 2.035

тоонд хуваахад гарах тооны аравтын бичлэгт "0" цифр хэдэн удаа орох вэ?

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

 
Бодлого 6.022

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

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