Өөр програмуудыг холбох. Vue -гийн хувь

Хичээлээр Vue -гийн обьект гэж юу болох түүний хувиудыг хэрхэн удирдах талаар авч үзье. Үүний тулд хуудаст h2 гарчиг түүнийг өөрчлөх товчийг агуулсан

    <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>

энгийн кодыг харцгаая. Кодод app нэртэй id -тай div элементэд Vue -гийн нэг хувийг тодорхойлсон байгаа.

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

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

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

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

Сүүлийн жилүүдэд интернетэд сууриласан програмуудын хэрэглэгч талын хуудсыг javascript сангуудыг ашиглан боловсруулах хандлага эрчимтэй хөгжиж байна. Javascript хэлийг бүх хөтөчүүд дэмжин ажилладаг нь сервер талын ачааллаг бууруулах, програмыг ажиллагааг илүү динамик, интерактив болгох, сервертэй өгөгдөл солилцох ажиллагаа зэргийг илүү хөнгөн хялбар болгоход чухал хэрэгтэй зүйл. Одоо цагт хэрэглэгчдийн компьютеруудын хүчин чадал, өгөгдөл боловсруулах хурд гээд бүхий л нөөцүүүд хангалттай сайжирсан нь нэг хуудаст программ буюу SPA -г боловсруулан ашиглах таатай нөхцлийг бүрдүүлсэн. Javascript хэлний боломжийг бүрэн ашиглан төрөл бүрийн өгөгдлүүдтэй их эвтэйхэн ажиллах боломжиг RxJs сан олгодогийг та хичээлүүдээс мэдэх болно.

Хичээлд RxJs санг компьютертаа суулган, туршилтын төслийг үүсгэхийг авч үзэцгээе. Хичээлд WebStorm засварлагчийг ашиглах ч та өөрийн дуртай засварлагчийг ашигласан ч болно.

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

react програмд олон хуудас үүсгэн удирдахын тулд react -ийн бүрэлдхүүнд ордоггүй ч түүнтэй нягт холбоотой ажилладаг нэмэлт пакетийг суулгах хэрэгтэй. Үүний тулд VSCode -ийн терминалийн цонхыг нээгээд

npm i react-router-dom

командыг өгнө. Пакетийг facebook боловсруулаагүй ч react програмд олон хуудас үүсгэн удирдахад хамгийн өргөнөөр ашигладаг. Төсөлд пакетийг ашиглахын тулд төслийн кодийг тусгай компонентод багцлан react програмд react-router пакетийг ашиглаж байгааг мэдэгдэх юм.

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

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

filter арга

Арга хэрхэн ажиллахыг шууд практик жишээн дээр харцгаая.

Rx.Observable.range(0, 10)
    .filter(x => x >3)
    .subscribe(createSubscribe('filter'));

Жишээнд стримийг RxJs сангийн Observable классын range аргаар үүсгэсэн. range арга 0 -ээс 10 хүртэлх тоон дарааллыг үүсгэнэ. filter аргад дарааллын урсгалд шүүлт тавих нөхцлийг дамжуулах ёстой. Аргад өгсөн нөхцлөөр тоон дарааллаас 0, 1, 3 элементүүдэд шүүлт /өөрөөр хэлбэл нөхцөлд тохирохгүй/ тавигдан 4 -өөс 10 хүртэлх тоонуудыг консолд үзүүлэх ёстой. Кодыг ажлуулбал

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

Компонентийн бусад амьдралын циклүүдийг судлахын өмнө функционал компонентийг ердийн буюу Component классаас удамшсан компонент болгож суръя. Манай төслийн Car компонент jsx кодийг буцаах ердийн функц хэлбэрийн хэрэгжүүлэлттэй.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

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

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

 

Зурагт өгөгдсөн дотоод байдлаараа шүргэлцсэн хоёр тойргийн TA нь ерөнхий шүргэгч, TC нь том тойргийн огтлогч, жижиг тойргийн шүргэгч болно. DC=3, CB=2 бол TA -г ол.

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