State -ийг ашиглах

Төсөлд 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 талбарыг нэмсэн байгаа.

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

how_to_regБүртгүүлэх

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

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

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

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
    </head>
    <body>
        <div id="app">
            <h2>isVisible = True</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    isVisible: true
                }
            })
        </script>        
    </body>
</html>

Дээрх энгийн код хуудаст h2 гарчигаар isVisible = True текстийг л үзүүлнэ. Vue -гийн тохиргооны обьектын data талбарт зарлагдсан isVisible талбарыг ашиглааагүй байгаа.

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

react компонентийн амьдалын суурь циклүүдийн сүүлийнх нь componentWillUnmount юм. Аргыг Car компонентод

   componentWillUnmount() {
    console.log('Car componentWillUnmount')
  }

нэмэн тодорхойльё. Арга хэзээ дуудагдахыг нэрнээс нь ойлгосон гэж бодож байна. componentWillUnmount арга компонентыг устган түүнийг DOM -оос хасах үед дуудагдана. Аргын ажиллагааг харахын тулд хөтөч дээр хуудсаа нээгээд машиний жагсаалтыг

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

ReactDOM элементэд хандах бас нэгэн боломжийн талаар авч үзье. Энэ боломжийг референс гэдэг бөгөөд та өөр фреймворкуудыг судлаж байсан бол мэдэх байх. Референс React -д хэрхэн ажилладаг ямар хэрэгтэйг харцгаая. Машинуудын жагсаалтыг үзүүлэх Car компонент машины мэдээллийг үзүүлэхдээ түүний нэрийг өөрчлөх input элементийг агуулж байгаа. Тэгвэл Car компонент машины мэдээллийг үзүүлэхэд жагсаалтын аль нэгэн элемент дээр фокус буюу сонголт хийгдсэн байх асуудлыг шийдэх гэе. Үүнийг хэрхэн хэрэгжүүлэх вэ? гэвэл үнэн хэрэгтээ сонголт хийгдэх элементийг DOM -оос аваад түүнд focus аргыг хэрэглэх юм.

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

react програм үүсгэх хичээлд create-react-app хэрэгслээр үүсгэсэн шинэ төслийг бүтэцтэй танилцая. Хичээлийн кодийн засварт би VSCode -ийг ашиглах бөгөөд D дискний projects хавтас дахь react хавтаст үүсгэсэн react-less хавтасыг код засварлагч дээр нээе.

Төслийн хавтас доторх үндсэн файлуудаас package.json бол маш чухал файл.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

Хуваах нь нэг тоо нөгөө тоонд хэдэн удаа агуулагдаж буй тодорхойлох арифметикийн үйлдэл.
Хуваалтыг нэг бус удаа…

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

 

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр…

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

 

Делегатууд хичээлд ухагдхууны талаар дэлгэрэнгүй үзсэн ч жишээнүүд делегатийн хүчийг бүрэн харуулж чадахааргүй байсан.…

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

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

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

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

 

Долоон хүнийг 2 ба 5 хүнтэй хоёр багт хуваах нийт боломжийн тоог ол.

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

 

Гадаад шүргэлтээр байрласан R ба r радиустай хоёр тойрогт дотоод ерөнхий болон гадаад хоёр шүргэгчийг татжээ. Гадаад шүргэгчдийн хооронд үүсэх дотоод шүргэгч дээрх хэрчмийн уртыг ол.

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