template шинж

VueJs програмыг арай өөрөөр инициализаци хийх аргыг авч үзье.

    <body>
        <div id="app">
            <h2 >{{ title }}</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Vue програм'
                }
            })
        </script>        
    </body>

кодод бид Vue -ийн хувийг app элементэд инициализац хийгээд app айдитай divtitle талбарт үзүүлж байгаа.

Хуудсыг нээвэл

Vue програм текстийг үзүүлнэ. Энд хүртэлх хичээлүүдэд Vue -гийн тохиргооны обьектод el талбарыг заавал тодорхойлон түүнд Vue -ийн хувийн инициализац хийх элементийн css селекторыг заан өгч байсан. Vue -ийн хувийн инициализацийг хийх өөр арга бий. Үүний тулд кодыг

    <body>
        <div id="app">
            <h2 >{{ title }}</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vue = new Vue({
                data: {
                    title: 'Vue програмын өөр инициализац'
                }
            });
            vue.$mount('#app')
        </script>        
    </body>

гэж өөрчилье. Кодоос el: '#app' мөрийг хасаад Vue -ийн шинэ хувийг vue хувьсагчид авсан. Дараа нь Vue -гийн обьектын тусгай mount аргыг дуудахдаа түүнд Vue -ийн хувийн инициализац хийх элементийн css селекторыг дамжуулна. Хуудсаа шинэчилбэл

бүгд хэвийн ажиллана. Програмын инициализац зөв хийгдэж байгааг шалгах үүднээс үзүүлэх текстийг өөрчилсөн болно. Эндээс Vue -ийн хувийн инициализацийг mount аргаар хийж болох нь. Үнэн хэрэгтээ mount аргыг дуудалгүй el: '#app' мөрийг заан инициализац хийхэд Vue -гийн обьект өөрийн mount аргад хандан app айдитай элементэд инициализацийг хийдэг.
Үүнээс гадна Vue -ийн тохиргооны обьектод template талбарт хуудасны шаблоныг заан өгч бас болдог. Жишээ нь

    <body>
        <div id="app"></div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vue = new Vue({
                data: {
                    title: 'Vue програмын өөр инициализац'
                },
                template: '<h1>{{ title }}</h1>'
            });
            vue.$mount('#app')
        </script>        
    </body>

Энд app айдитай элементэд байсан html кодыг хасаад javascript кодод Vue -ийн тохиргооны обьектод template талбарт хуудасны html кодыг өгөөд дараа нь mount аргаар app айдитай элементэд инициализац хийсэн. Хуудсыг нээвэл

бүгд хэвийн ажиллана. Ялгах үүднээс хуудаст үзүүлэх текстийг h1 тегээр үзүүлсэн. Хуудасны хэвийг template талбараар дамжуулах энэ аргад тодорхой хязгаарлалт байдаг. Хэрвээ шаблонд олон тооны html элементүүд орохоор бол тэдгээрийг ямар нэгэн суурь элементэд оруулан багцлах хэрэгтэй. Жишээ нь

    <body>
        <div id="app"></div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vue = new Vue({
                data: {
                    title: 'Vue програмын өөр инициализац'
                },
                template: '<div><h1>{{ title }}</h1><p>Өдрийн мэнд</p></div>'
            });
            vue.$mount('#app')
        </script>        
    </body>

template талбараар дамжуулах html кодод title талбараас гадна p тегэд текстийг нэмэн үзүүлэх тул тэдгээрийг нэгтгэсэн div тегд оруулсан. Хуудасны ажиллагааг шалгавал

бүгд хэвийн ажиллана. Хэрвээ шаблоныг нэгтгэсэн div тегд авахгүй бол хуудасны ажиллагаанд алдаа өгнө. Үүнийг өөрсдөө шалгаарай.

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

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

vuex сан төслийн компонентуудын ажиллагаануудын хоорондын хамааралыг арилган бие даан ажиллах боломжийг бүрдүүлдэг. Getters -ийг ашиглах хичээлд vuex сангийн state, getters талбаруудыг ашиглан Counter , SecondCounter компонентуудыг бусад компонентуудаас хамааралгүйгээр ажилладаг болгосон. Counter , SecondCounter компонентууд одоо зөвхөн store -той харьцан ажиллах болсноор төслийн компонент хоорондын хамаарал багасан програмын ажиллагааны логик ойлгомжтой хөнгөн болохын дээр компонентуудыг дахин ашиглах боломж бүрдсэн.

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

Үйл явц нэмэх хичээлд хуудасны Гарчиг өөрчлөх товч дээр дарахад үүсэх үйл явцын боловсруулагчийг үүсгэн туршин үзсэн. Үйл явцын боловсруулагч changeTitleHandler функц консолд Товч дарагдсан текстийг л харуулж байгаа. Энэ удаадд үйл явцын боловсруулагчийн функционал ажиллагаа буюу h1 гарчигаар үзүүлж байгаа текстийг өөрчлөлтийг хийе. changeTitleHandler функцэд h1 гарчигаар үзүүлж байгаа текстийг

  changeTitleHandler = () => {
    console.log("Товч дарагдсан")
    this.state.pageTitle = "Товч дарагдсан"
  }

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

Хукууд ердийн функцууд тул бид ч өөрсдөө хукийг зохион ашиглах боломжтой. Үүнийг input элемент, түүнд оруулсан текстийг үзүүлэх h1 гарчиг бүхий дараах энгийн

import React, {useState} from 'react'

function App() {
  const [name, setName] = useState('')
 
  const changeHandler = event => {
    setName(event.target.value)  
  }
 
  return (
    <div className="container pt-3">
      <input type="text" value={name} onChange={changeHandler}/>
      <h1>{name}</h1>
    </div>      
  );
}

export default App;

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

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

Өмнөх хичээлүүдэд React сан хэрхэн ажилладаг, create react app хэрэгсэл, хуудасны хэвийн бичлэгийн Jsx дүрмүүдтэй танилцан тэдгээрийн ажиллагааг жишээнд дээр судлан танилцсан бол одоо сангийн өөрийнх нь ажиллагаануудтай дэлгэрэнгүй танилцгаая. Эхлээд create react app хэрэгслээр үүсгэсэн төслийн үндсэн компонент болох App -аас өмнөх хичээлд судалсан зарим ойлголтуудын жишээ кодийг

class App extends Component {
  render() {
    const divStyle = {
      textAlign: 'center'
    }
    return (
      <div style={divStyle}>
        <h1>
          Hello world!
        </h1>
        <Car name={'Toyata Prius'} year={'2018'} />
        <Car name="Toyata Camry" year={'2019'} />
        <Car name={'Ford'} year={'2015'} />
      </div>
    )
  }
}

хасан цэвэрлэе.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

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

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

 

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

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