Компонент үүсгэх

Өмнөх хичээлүүдэд бид create-react-app хэрэгслээр үүсгэсэн төслийн суурь код дээр жишээнүүдийг судласан. Одоо react төсөлд өөр компонентууд үүсгэн тэдгээрийг өөр хооронд нь холбон ашиглахыг сурцгаая. react -ийн компонентийг голдуу тусд нь хавтас үүсгэн байршуулдаг тул бид төслийн src хавтаст Car нэртэй хавтасыг үүсгээд түүн дотор Car.js файлыг үүсгээрэй.

react -д компонентийг үүсгэх хоёр үндсэн арга байдаг талаар JSX хичээлд дурдсан.

Өмнөх хичээлүүдэд ашигласан App компонентийг төрөл бүрийн ажиллагаануудыг дэмждэг бүрэн хэмжээний компонент аргаар үүсгэсэн бол Car компонентийг функционал аргаар

import React from 'react'

function Car() {
  return (
    <h2>This is car component</h2>
  )
}

export default Car

гэж үүсгэе. create-react-app хэрэгсэл төслийг үүсгэхдээ App компонентийг энэ аргаар үүсгэсэн байсанг бид бүрэн хэмжээний компонентийн зарим ажиллагаануудыг судлах зорилгоор Component классаас удамшсан класс хэлбэрээр өөрчлөн бичсэн. Функционал компонент Jsx -ийг буцаах учраас react санг импортлох ёстойг санаж байгаа байх. Үүний дээр Car компонентийг өөр компонентод ашиглахын тулд түүнийг экспортолсон байх ёстойг сануулъя. Одоо Car компонентийг өөр компонентод ашиглахдаа /жишээ нь App/ эхлээд import Car from './Car/Car' гэж компонентийг импортлоод.

import Car from './Car/Car'

class App extends Component {
  render() {
    const divStyle = {
      textAlign: 'center'
    }
    return (
      <div style={divStyle}>
        <h1 style={{ color: 'blue', fontSize: '20px' }}>
          Hello world!
        </h1>
        <Car />
      </div>
    )
  }
}

App компонентийн агуулгыг багцалж буй элемент /div/ дотор html тег хэлбэрээр <Car /> гэж өгнө. Импорт хийж буй import Car from './Car/Car' бичлэг нь Car хавтас доторх Car.js файлаас эскпортолж байгаа Car -ийг Car нэрээр импортлоно гэж байгаа юм. Файлын .js өргөтгөлийг бичихгүй байж болдог. Өөрчлөлтийг хадгалаад хуудсаа харвал

гэж харагдана. Хуудасны кодийг харвал App компонентийн агуулгыг багцалж буй элемент /div/ дотор html тег хэлбэрээр өгөгдсөн <Car /> -ийн оронд Car компонентийн хэв /шаблон/ орж ирсэн байгаа. Ямар нэгэн төлөв, функционал ажиллагаа байхгүй энгийн компонентийг ийм байдлаар үүсгэнэ. Car компонентийн бичлэгийг ES6 -гийн сумаар тодорхойлогдох функцээр

import React from 'react'

const car = () => {
  return (
    <h2>This is car component</h2>
  )
}

export default car

гэж хураангуйлж болно. Сумаар тодорхойлох функц хичээлээс дэлгэрүүлэн үзээрэй. Өөрчлөлтийг хадгалаад хуудсаа харвал бүгд хэвийн ажиллана. car функц функционалгүй шууд утга буцааж байгаа тул кодоос return -г хасан

import React from 'react'

const car = () => <h2>This is car component</h2>

export default car

гэж бичсэн ч болно. Өөрчлөлтийг хадгалаад хуудасны ажиллагааг шалгавал урьдын адилаар ажиллана.

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

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

Аливаа зүйлийг сурахад хүнээс багагүй хүч, хөдөлмөр шаардана. Манай хүмүүс яаж хурдан сурах, яаж амар хийх талаар их асуудаг. Хурдан сурах нь тухайн хүнээс л хамаарана. Хүн бол толгой, тархи, санаа бодлыг нь ольчихдог машин техник биш гэдгийг л ойлгоорой. Суралцахад тэвчээр, тогтмол үзэх, чин хүсэл зориг байх хэрэгтэй. Тэгэхгүй бол сайн үр дүнд найдах бараг хэрэггүй. Сайтын хичээлүүд практик ашиглалтад түлхүү анхаарсан тул шууд ашиглах эсхүл гэрын авлаг байдлаар ашиглахад зориулагдсан. 

Энэ удаад Миксин /Mixin/ гэж юу болох, ямар хэрэгтэй, түүнийг хэрхэн ашиглахыг авч үзнэ. Үүний тулд Жагсаалтыг шүүх хичээлийн жишээнд өөрчлөлтийг хийн өргөжүүлье. Төслийн components хавтаст List.vue нэрээр

<template>
  <h1>List</h1>
</template>

<script>
export default {
 
}
</script>

кодтой компонентийг үүсгээд програмын эхлэлийн цэг main.js файлд компонентийг app-list нэрээр глобал байдлаар

import Vue from 'vue'
import App from './App.vue'
import List from './components/List.vue'

Vue.filter('uppercase', value => value.toUpperCase())

Vue.component('app-list', List)

new Vue({
  el: '#app',
  render: h => h(App),
})

бүртгүүлье.

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

Хичээлээр компонент хоорондын харилцан ажиллагааны бас нэгэн аргыг авч үзье. Доод шатны /хүүхэд/ компонентоос параметр дамжуулах хичээлд бид хүүхэд компонентод үйл явц үүсгээд түүнийг эцэг компонентод сонсохыг сурсан. Өөрөөр хэлбэл эцэг компонентод тодорхойлогдсон талбарын утгыг хүүхэд компонентоос өөрчилсөн. Үүнийг хийх бас нэгэн арга бий. Жишээ нь App компонентод

<script>
import Car from './components/Car.vue'

export default {
  data () {
    return {
      carName: 'Toyota',
      carYear: 2018
    }
  },
  methods: {
    changeCarName() {
      this.carName = 'Benz'
    }
  },
  components: {
    appCar: Car
  }
}
</script>

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

Хөтөч дээр ажилладаг програмын чухал хэсэг бол хуудасны хэвжүүлэлт байдаг гэдгийг бүгд мэднэ. Хуудасны харагдах хэлбэр, өнгөний зөв сонголт нь таны програмыг бусдаас ялгаруулан харагдуулах нэг гол хүчин зүйл гэдгийг санаарай.

Vue -гийн компонентод хэвүүдийг /css style/ яаж ашиглах талаар үзье. Тухайлбал компонентийн style хэсгийг хэрхэн ашиглах тухай юм. Үүний тулд төслийн компонентуудийн кодыг доорх байдлаар хураангуйлая.
App.vue файл.

<template>
  <div>
    <app-counter></app-counter>
    <app-car></app-car>  
  </div>
</template>

<script>
import Car from './components/Car.vue'
import Counter from './components/Counter.vue'

export default {
  components: {
    appCar: Car,
    appCounter: Counter
  }
}
</script>

Жич: Сүүлийн жилүүдэд javascript фреймворкууд эрчимтэй хөгжин програмчлалын хэлүүдийн рейтенгд нилээд дээгүүр байранд орж ирэх болсон. Иймээс дэлхийн чиг хандлагаас хоцрохгүйн тулд хэлийг судлан суралцахад манай сайт таныг дэмжин ажиллана. Хичээлүүдийг бүгдийг Vue фреймворкийн үндсэн ойлголтууд багцаас үзээрэй.

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

Хичээлээр компонентод ирж буй параметрүүд зөв эсэх, ийм шалгалтыг хийх ямар ач холбогдолтой талаар үзье. Компонентод параметр дамжуулах хичээлд App компонентоос carName, carYear талбаруудыг Car компонентод параметрээр дамжуулан авч үзүүлсэн. Тэгвэл Car компонент ирсэн параметрүүд дээр ямар нэгэн нэмэлт үйлдлийг жишээ нь машины нэрийг тонгоруулан

<template>
  <div class="car">
    <h3>Name: {{ carName }} \ {{reverseName}}</h3>
    <p>Year: {{ carYear }}</p>
  </div>
</template>

<script>
  export default {
    props: ['carName', 'carYear'],
    computed: {
      reverseName() {
        return this.carName.split('').reverse().join('')
      }
    }
  }
</script>

харуулдаг гэж үзье.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

илэрхийллийг хялбарчил.

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

 

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

 

prob09_163_01Зурагт өгсөн ABC гурвалжны AN=9, BM=12 байх медианууд перпендикуляр ба O цэгт огтлолцох бол ONCM дөрвөн өнцөгтийн талбайг ол.

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