Доод шатны /хүүхэд/ компонентоос параметр дамжуулах

Интернетэд сууриласан хөтөч дээр ажилладаг програмуудыг боловсруулахад javascript хэл чухал үүрэгтэй бөгөөд сүүлийн жилүүдэд javascript фреймворкуудын хөгжлийн үр дүнд нэг хуудаст програмчлалын аргачлал улам хүчтэй орж ирэх боллоо. Програмчлалын чиглэлээр сурч, ажиллаж байгаа залуучуудад зориулан Vuejs фреймворкийн хичээлүүдийг бэлтгэн оруулж байгаагийн ээлжит хичээлээр эцэг компонентоос хүүхэд компонентод параметрийг дамжуулахын зэрэгцээ хүүхэд компонентод үүссэн үйл явцыг эцэг компонент мэдэх асуудлыг хэрхэн шийдэхийг авч үзье. Үүний тулд Car компонентийн кодыг

<template>
  <div class="car">
    <h3>Name: {{ carName }} \ {{reverseName}}</h3>
    <p>Year: {{ carYear }}</p>
    <button @click="changeName">Нэрийг өөрчлөх</button>
  </div>
</template>

<script>
  export default {
    props: {
      carName: {
        type: String,
        default: 'Нэр байхгүй'
      },
      carYear: Number
    },
    methods: {
      changeName() {
        this.carName = 'Prius'
      }
    },
    computed: {
      reverseName() {
        return this.carName.split('').reverse().join('')
      }
    }
  }
</script>

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

Компонентийн шаблонд Нэрийг өөрчлөх товчийг нэмээд товч дээр дарах үйл явцын боловсруулагчийг methods талбарт тодорхойлон өгсөн. changeName арга carName параметрийн утгыг өөрчилнө. Ингэснээр Нэрийг өөрчлөх товчийг дарахад машины нэрийг Prius болгон өөрчлөхөөр болсон. Програмын ажиллагаа шалган

үзвэл Нэрийг өөрчлөх товчийг дарахад машины нэрийг Prius болгон өөрчлөн бүх зүйл хэвийн ажиллана. Хэрвээ хөтөчийн Inspect цонхны Console хэсгийг нээвэл тэнд

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

Жич: Javascript код алдаа, сануулгыг консолд дамжуулаад ажиллагаагаа дуусгадаг тул боловсруулалтын явцад консолын цонхонд үзүүлэх мэдээллийг байнга шалгахыг зөвлөе.

Програмын ажиллагааны логикоор carName талбарыг App компонентод тодорхойлоод түүнийг Car компонентод дамжуулан үзүүлнэ. Гэтэл бид Car компонентод carName талбарыг шууд өөрчилөхөд тухайн компонентод талбарын утга өөр болох ч эцэг компонентод тодорхойлогдсон утга хэвээр үлдсэн нь дээрх үр дүнгээс тодорхой харагдана. Үүнийг л консолд сануулаад байгаа хэрэг. Эндээс дүгнэвэл Car компонент хэвийн ажиллан машины нэрийг өөрчилж байгаа ч манай програмын ерөнхий логик тийм зөв ажиллахгүй байгаа нь тодорхой. Учир нь App компонентод тодорхойлогдсон carName талбарыг Car компонент өөрчилснөө эцэг компонентод мэдэгдээгүйтэй холбоотой юм. Эндээс carName талбарын утга Car компонентод өөрчлөгдсөнг эцэг буюу App компонентод хэрхэн мэдэгдэх вэ? гэсэн асуулт гарч ирнэ. Үнэн хэрэгтээ үүнийг их энгийнээр шийднэ. Car компонентийн кодыг

<script>
  export default {
    props: {
      carName: {
        type: String,
        default: 'Нэр байхгүй'
      },
      carYear: Number
    },
    methods: {
      changeName() {
        this.$emit('nameChanged', 'Prius')
      }
    },
    computed: {
      reverseName() {
        return this.carName.split('').reverse().join('')
      }
    }
  }
</script>

гэж өөрчилье. Кодын changeName аргад carName талбарын утгыг шууд өөрчлөхгүйгээр javascript обьект бүрд байдаг $emit аргаар эцэг компонентод талбарын өөрчлөлтийг мэдэгдэнэ. $emit арга эхний параметрээр үйл явцын нэрийг харин хоёрдахь параметрээр өөр компонентод дамжуулах утгыг авдаг. Иймээс changeName аргад carName талбарын утгыг шууд өөрчлөхгүйгээр this.$emit('nameChanged', 'Prius') гэж хүүхэд компонентод үүссэн nameChanged үйл явцын нэр, Prius -ийг дамжуулна. Үйл явцын нэрийг та өөрийн хүссэнээр өгч болно. Хүүхэд компонентод үүссэн үйл явцыг эцэг компонентод

<template>
  <div>
    <h1>Эцэг: {{ carName }}</h1>
    <app-car
      :carName="carName"
      :carYear="carYear"
      @nameChanged = "carName = $event"
    ></app-car>  
  </div>
</template>

гэж сонсоно. Үүний тулд Car компонентийг оруулан ирэх app-car тегд nameChanged үйл явцыг боловсруулагчийг v-on: директивээр холбон өгнө. v-on: директивийн бичлэгийг @ гэж хураангуйлдагийг Директивийн тэмдэглэгээ хичээлээс мэднэ. Үйл явцыг боловсруулагчийг App компонентийн methods талбарт тодорхойлоод дуудах эсхүл inline байдлаар шууд тодорхойлох боломжийг vuejs бидэнд олгодог тул carName = $event гэж өгсөн. Компонентоос ирсэн параметрүүдийг $event гэж авдагийг бид мэдэх учраас carName = $event бичлэг нь carName талбарын утгаар хүүхэд компонентоос ирсэн параметрүүдийн утгыг олгоно гэдгийг илэрхийлнэ.
Кодын өөрчлөлтөө хадгалаад хуудсаа шинэчлээд Нэрийг өөрчлөх товчийг дарахад

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

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

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

EcmaScript 6 -гийн зарим обьектуудад шинээр бий болсон аргуудын талаар хичээлд авч үзье.

Обьектыг өргөжүүлэх

Обьектын өргөжүүлэлтийг хийх аргыг

let obj1 = {a: 1};
let obj2 = {b: 2, c: 3};

обьектууд дээр авч үзье. obj1 -ийг obj2 -оор өргөжүүлье гэвэл ES6 -д бий болсон assign аргыг

Object.assign(obj1,obj2);

ашигладаг. Аргад эхний параметрээр өргөжих /target/ обьектыг харин хоёрдахь параметрээр өргөжүүлэх /source/ обьектыг өгнө. Дээрх командын дараа

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

ES6 хувилбарт бий болсон шинэ боломжуудыг судлах бэлтгэлийг Орчны тохиргоо хичээлээр үзсэн. Энэ хичээлээс ES6 хувилбарын шинэ боломжуудын талаар авч үзэж эхлэх ба хамгийн энгийн нь болох хувьсагчдад бий болсон шинэчлэлээс эхлэе.

const түлхүүр үг.

Javascript -ийн өмнөх хувилбаруудад хувьсагчийг var түлхүүр үгээр

var q = 1;
q = 2;
q = 'w';

үүсгээд цааш утгыг q = 2;, төрлийг q = 'w'; өөрчлөхөд ямар нэгэн асуудал үүсдэггүй. Гэвч Javascript -д утгыг нь солих боломжгүй тогтмол утга байдаггүй байсныг const түлхүүр үгээр зарлах боломжийг EcmaScript 6 -д бидэнд олгосон. Хэрвээ const түлхүүр үгээр

const MY_CONST = 1;
MY_CONST = 2;

MY_CONST тогтмолыг зарлаад дараа нь түүний утгыг өөрчлөх гэвэл webstorm тогтмолд утга олгох оролдлого хийлээ гэсэн алдааг заана. index.js файлын компиляцийг хийх гээд үзье.

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

Програмийг удирдах цэсийг нээх болон хаах ажиллагааг хариуцах компонентийг боловсруулъя. Үүний тулд төслийн components хавтаст Navigation хавтасыг үүсгээд түүн дотор цэсний шилжилтийн компонентийн MenuToggle хавтасыг үүсгээрэй. Компонентийн хавтаст

import React from "react";
import classes from "./MenuToggle.module.css";

const MenuToggle = (props) => {
  const cls = [classes.MenuToggle, "fa"];
  if (props.isOpen) {
    cls.push("fa-times");
    cls.push(classes.open);
  } else {
    cls.push("fa-bars");
  }

  return <i className={cls.join(" ")} onClick={props.onToggle} />;
};

export default MenuToggle;

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

Програмчлалын хэлүүдэд хэрэглэгчийн зүгээс үүсгэх үйл явц, түүний боловсруулалт чухал байр эзэлдэг. Үйл явцын боловсруулалтад модификаторийг ашиглан кодыг хэрхэн хураангуй болгохыг Үйл явцын модификаторууд хичээлээс мэдсэн Энэ удаад үйл явцын модификаторын бас нэг боломжийг

    <body>
        <div id="app">
            <input type="text" v-on:keyup="alertValue">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                methods: {
                    alertValue: function() {
                        if (event.keyCode === 13)
                            alert(event.target.value)
                    }
                }
            })
        </script>
    </body>

код дээр харцгаая. Хуудаст хэрэглэгчээс өгөгдөл авах input элемент байрлан түүнд товч дарагдах үйл явцыг v-on:keyup атрибут alertValue боловсруулагчтайгаар сонсохоор заасан.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

Адил хажуут трапецын сууриуд 20 ба 12 см. Трапецыг багтаасан тойргийн төв их суурь дээр байрлах бол трапецын диагналыг ол.

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

 

тэгшитгэлийн язгууруудын нийлбэрийг ол.

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

 

Зурагт үзүүлсэн хагас тойрогт бол AB -ийн уртыг ол.

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