Компонент гэж юу болох

React компонентод тулгуурладаг сан тул компонент гэж юу болохыг ойлгоцгооё. Үүний тулд машиний мэдээллийг үзүүлэх

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Lesson 01_02</title>
  <style>
    .car {
      display: inline-block;
      border: 2px solid #ccc;
      box-shadow: 2px 2px 1px #eee;
      padding: 10px;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <div class="car">
    <h3>Toyata Camry</h3>
    <p>Year: <strong>2019</strong></p>
  </div>
</body>
</html>

код бүхий html файлыг үүсгээд хөтөч дээр нээвэл

гэж харагдана.

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

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

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

Холбоотой материалууд
Миксинийг ашиглах

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

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

Энэ удаад Миксин /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),
})

бүртгүүлье.

Шүүлтийн операторууд

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

Интернетэд суурилсан програм зохиоход олон төрлийн технологи, аргачлалыг хослуулан ашигладаг хэдий ч хэрэглэгч талын хуудаст javascript, css, html -ийг голлон хэрэглэдэг. Эдгээрээс javascript хэл их чухал үүргийг гүйцэтгэдэг тул сайтад энэхүү хэлний фреймворк, сангуудын хичээлүүдийг нийтэлж байгаа ба энэ удаад RxJs сангийн өгөгдлүүдэд шүүлт тавин боловсруулалт хийдэг операторуудын талаар авч үзэцгээе.

filter арга

Арга хэрхэн ажиллахыг шууд практик жишээн дээр харцгаая.

Rx.Observable.range(0, 10)
    .filter(x => x >3)
    .subscribe(createSubscribe('filter'));

Жишээнд стримийг RxJs сангийн Observable классын range аргаар үүсгэсэн. range арга 0 -ээс 10 хүртэлх тоон дарааллыг үүсгэнэ. filter аргад дарааллын урсгалд шүүлт тавих нөхцлийг дамжуулах ёстой. Аргад өгсөн нөхцлөөр тоон дарааллаас 0, 1, 3 элементүүдэд шүүлт /өөрөөр хэлбэл нөхцөлд тохирохгүй/ тавигдан 4 -өөс 10 хүртэлх тоонуудыг консолд үзүүлэх ёстой. Кодыг ажлуулбал

Динамик атрибутууд

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

VueJs -ээр хуудас дээрээс өөр сайт руу шилжилт хийх техникийг авч үзье. Хуудас дээрээс e-surgalt.com сайт руу хандах холбоосыг байршуулаад түүгээр дамжин сайтад хандая гэвэл data талбарын обьектод url талбарыг зарлаад түүнд шилжих сайтын хаягаа өгөөд хуудасны кодод холбоосоор шилжих хаягаа {{ url }} гэж заасан

    <body>
        <div id="app">
            <h2>
                <a href="{{ url }}">E-surgalt</a>
            </h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    url: 'https:'
                }
            })
        </script>        
    </body>

дээрх агуулга бүхий кодыг бичэхэд болох мэт.

Map, WeakMap обьектууд

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

Та сайт боловсруулж байсан бол хэрэглэгч талын хуудаст javascript -ийг ашиглахгүйгээр олигтой үр дүнд хүрэхгүй гэдгийг ойлгосон байх. Сүүлийн жилүүдэд интернетэд сууриласан програмууд хэрэглэгч талын хуудасны бие даан ажиллах боломжид ихээхэн анхаарах болсон. Учир нь програмуудын хийж гүйцэтгэх ажлууд их болох тусам бүгдийг сервер тал хариуцах нь нилээд төвөгтэй болон ирдэг. Үүний зэрэгцээ хэрэглэгч талын компьютерийн хүчин чадал ихээхэн дээшилсэн нь зарим нэгэн ажиллагаануудыг хэрэглэгч талд хийх нь илүү үр ашигтай болсон. Иймээс л javascript хэлийг програм зохиогчдын заавал эзэмшсэн байх хэлүүдэд оруулаад байгаа хэрэг. ES6 -д бий болсон Set төстэй бас нэгэн бүтэц бол Map обьект юм. Set бүтэц массивтай төстэй бол харин Map бүтэц обьект хэлбэрийн. Map бүтцийг

let map = new Map();

map.set('name', 'e-surgalt');
map.set('age', 20);

console.log(map);

жишээн дээр судлая. map -ийг Map обьектын хувь байдлаар үүсгээд түүний set аргаар name, age талбаруудыг үүсгэн утга олгоод map -ийг консолд үзүүлбэл

Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

 
Хуваах

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

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

 
Зуучлагч (Mediator)

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

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

 
Делегатийн хэрэглээ

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

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

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

Арифметик прогресийн 5-р гишүүн 8,4 харин 10-р гишүүн 14,4 тэнцүү бол энэ прогресийн 22-р гишүүнийг ол.

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

 
Бодлого 6.060

Дарааллын эхний n гишүүний нийлбэр томьёогоор өгөгджээ. Хэрэв энэ дараалал геометр прогресс бол q -г ол, арифметик прогресс бол d -г ол.

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

 
Бодлого 4.062

бол M·N=?

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

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