Төлөв үүсгэх

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

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

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

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

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

Холбоотой материалууд
Массив

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

Массив гэдэгт компьютерын санах ойд байгаа нэг төрлийн өгөгдлүүдийн цуглуулгыг ойлгож болно. Массивыг ашигласнаар нэг нэрээр компьютерын санах ойн хаягт хандаж болно. Массивын элемент руу хандахдаа индексийг ашиглана. Ингэхдээ элементүүдийн дугаарлалтыг тэгээс эхэлнэ. Элементийн дугаар нь түүний индекс болох ба нийт элементийн тоо нь массивын хэмжээ байна. Массивыг зарлахдаа дөрвөлжин хаалтыг ашиглаж хаалтанд массивын элементүүдийг таслалаар тусгаарлан бичнэ. Жишээ нь 

  var a;
  a=[3, 5, 8];

Цэсийн хэрэгжүүлэлт

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

Цэсийг нээх хаах ажиллагааг хариуцах компонентийг боловсруулсан тул энэ хичээлээр програмийн удирдах цэсийг хийе. Үүний тулд төслийн components хавтасны Navigation хавтаст цэсний компонентийн Drawer хавтасыг үүсгээд түүнд Drawer.js, Links.js, Drawer.module.css файлуудыг үүсгэн өгье. Drawer.js файлд

import classes from "./Drawer.module.css";
import {links} from "./Links"

const Drawer = (props) => {
  const renderLinks = () => {
    return links.map((link, index) => {
      return (
        <li key={index}>
          <a href="/#">Link {link}</a>
        </li>
      );
    });
  }
    
  return (
    <nav className={classes.Drawer}>
      <ul>{renderLinks()}</ul>
    </nav>
  ) 
}

export default Drawer;

код бүхий компонентийг үүсгэе.

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

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

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 функц дуудагдана. Хуудасны ажиллагааг шалган үзээрэй.

vue-router -ийг суулгах

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

Хичээлээр Vuejs фреймворкийн роутинг /чиглүүлэгч гэж орчуулж болох юм/ ойлголтын тухай авч үзье. Орчуулга муухан болсон байх талтай тул Routing гэсэн хэллэгээр нь шууд ойлгох нь илүү болов уу. Програмчлалын хэлний ухагдхуунуудыг шууд гадаад үгээр нь ойлгон тогтоох нь сайн. Учир нь монгол хэл дээр програмчлалтай холбоотой мэдээллүүд бага болохоор бид ихэнх зүйлийг интернетийн гадаад хэлтэй орчноос эсхүл гадаадын ном, хэвлэлээс судлах хэрэгтэй болдог. Vuejs фреймворкийн роутингийг ашиглахын тулд төслийн хуудас хоорондын чиглүүлэгчийг зохион байгуулдаг vue-router пакетыг төсөлдөө суулгах хэрэгтэй.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

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

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

 
Бодлого 7.128

утгыг ол.

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

 
Бодлого 4.103

prob04_103_01 ба prob04_103_02 векторууд перпендикуляр бол y -ийн утгыг ол.

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

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