Компонентын нэр

Компонентыг бүртгүүлэх хичээлд компонентийн нэрийг 'my-counter' гэж мөр төрлөөр бичин өгсөн. Энэ нь зарим тохиолдолд асуудал үүсгэдэг. Жишээ нь та төсlлийн кодыг бичиж буй засварлагчид кодыг цэвэр байлгах ямар нэгэн хэрэгсэл /linter/ ашиглаж байвал нэрэнд хашилтыг хэрэглэвэл төслийн хэвээс хасагддаг тул үүнийг ашиглахгүй байх нь дээр. Иймээс VueJs -д компонентийн нэрийг үүсгэх өөр аргачлал байдаг. Компонентийн нэрийг өгөхдөө

            new Vue({
                el: '#app',
                components: {
                    'my-counter': component
                }
            });

хашилтанд my-counter гэж html кодод ашиглах тегийн нэрийг өгсөн байгаа.

VueJshtml кодод ашиглах тегийн нэрийг арай өөрөөр үүсгэх арга байдгийг Компонентыг бүртгүүлэх хичээлийн жишээний div id="app1" элементэд Vue програмын инициализац хийхдээ my-counter компонентийг

    <body>
        <div id="app">
            <my-counter v-for="c in 2"></my-counter>
        </div>
        <hr>
        <div id="app1">
            <my-counter></my-counter>
        </div>        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var component = {
                template: `
                    <div style="border: 1px solid green; padding: 10px">
                        <h2>Тоолуур: {{ counter }}</h2>
                        <button @click="add">Тоолуурыг нэмэх</button>
                    </div>                
                `,
                data: function() {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    add: function() {
                        this.counter++
                    }
                }
            }
            
            new Vue({
                el: '#app',
                components: {
                    'my-counter': component
                }
            });

            new Vue({
                el: '#app1',
                components: {
                    myCounter: component
                }
            })            
        </script>        
    </body>

бүртгүүлсэн жишээнээс харцгаая. app1 айдитай divVue -гийн хувийн инициализац хийхдээ түүний тохиргооны обьектын components талбарт компонентийг бүртгүүлсэн. Гэхдээ энд компонентийн нэрийг хашилтанд мөр хэлбэрээр биш myCounter гэж тэмээ /camelCase/ хэвийг ашиглан бичсэн. Үүнийг Vue фреймворк my-counter тегийн нэртэй ижилхэн болгон хөрвүүлнэ. Иймээс html кодод тегийг <my-counter></my-counter> гэж бичсэнг өөрчлөхгүйгээр ашиглана. Хуудсыг хөтөч дээр нээвэл

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

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

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

Хичээлээр RxJs сангийн талаар өмнөх хичээлүүдээр олон авсан мэдлэгээ бататган API контактад хандан хэрэглэгчийн мэдээллийг авах энгийн програмыг боловсруулах болно. Програмаас төрөл бүрийн хүсэлтийг илгээх боломжтой болгох зорилгоор төсөлдөө Jquery санг суулгая. Үүний тулд WebStorm текст засварлагчийн терминалыг нээгээд

npm i jquery командыг өгөөрэй.

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

Ямарч програмын ажиллагааны чухал хэсэг бол төрөл бүрийн мэдээллийн боловсруулалт, тэдгээртэй ажиллахтай холбоотой байдаг. Иймээс энэ хичээлээс vuejs дээр төрөл бүрийн өгөгдлүүдтэй хэрхэн үр дүнтэй харьцах аргуудыг судлаж эхлэнэ. Үүнийг бид маш энгийн

жишээгээр үзнэ.

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

Хичээлээр react -ийн хамгийн чухал бөгөөд хэрэгтэй хукуудийн нэг болох useCallback -ийн талаар авч үзье. Хукийн судалгааг дараах

import React, {useState} from 'react'

function App() {
  const [colored, setColored] = useState(false)
  const [count, setCount] = useState(1)
    
  const styles = {
      color: colored ? 'darkred' : 'black'
  }
    
  return (
      <div className="container">
        <h1 style={styles}>Элементийн тоо: {count}</h1>
        <button className={'btn btn-success mx-3'} onClick={() => setCount(prev => prev + 1)}>Нэмэх</button>
        <button className={'btn btn-warning mx-3'} onClick={() => setColored(prev => !prev)}>Өөрчлөх</button>
      </div>
  );
}

export default App;

кодоор авч үзье. Компонентийн код логикийн хувьд өмнөх хичээлүүдийнхтэй бараг ижил тул тайлбарлах нь илүүц гэж үзлээ.

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

ES6 -д өгөгдлүүдийг олонлог байдлаар хадгалан тэдгээртэй ажиллах Set , WeakSet обьектууд бий болсон. Хичээлээр энэхүү шинэчлэлүүдийн тухай үзье.

Set обьект

Set өөртөө төрөл бүрийн утгуудыг агуулан тэдгээртэй ажиллагааг хөнгөн болгох массив төрлийн тусгай бүтэц буюу обьект юм. Гэхдээ Set -д зөвхөн давтагдахгүй утгуудыг хадгалж болдог. Ингээд Set гэж юу болох түүнтэй хэрхэн ажиллахыг дараах

let set = new Set();
set.add(10);
set.add('Hello');
set.add({});

console.log(set);
console.log(set.size);

энгийн жишээгээр харцгаая.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

тэгшитгэлийн нэг язгуур нь эерэг, нөгөө язгуур нь сөрөг байх параметрийн бүх утгыг ол.
Тэнцэтгэл бишийн нэг шийд нь M -ээс бага нөгөө шийд нь M -ээс их байх гарцаагүй ба хүрэлцээтэй нөхцөлийг ашиглавал болох бөгөөд энэ тэнцэтгэл бишийг бодвол үед манай тэнцэтгэл бишийн шийдийн нэг нь эерэг нөгөө нь сөрөг байна.

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

 

функц [1;9] завсарын аль хэсэгт буурах вэ?

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

 

функцийн хамгийн бага утгыг ол.

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