Үйл явдлыг боловсруулах дараалал

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

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

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

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

Холбоотой материалууд
Getters -ийг ашиглах

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

Төслийн нэгдсэн хадгалагчид програмын төлвүүдийг state -д үүсгэн ашиглахыг сурсан тул vuex -ийн дараагийн боломжийг судалцгаая. Одоогоор төслийн Actions компонентод байрлах товчнууд дээр дарах үйл явцын боловсруулагч state -д тодорхойлогдсон counter талбарын утгыг өөрчилнө. Харин Counter компонент state -ээс counter талбарыг аван темлейтдээ үзүүлж байгаа. Төсөлд бас нэгэн компонентийг нэмээд түүн дээр vuex -ийн дараагийн боломжийг судлая. Үүний тулд төслийн components хавтаст Counter компоненттой ижилхэн

<template>
  <h2>Тоолуур 2: {{counter}}</h2>
</template>

<script>
export default {
  computed: {
    counter() {
      return this.$store.state.counter
    }
  }
}
</script>

кодтой SecondCounter.vue файлыг үүсгэе.

Энгийн шүүлтүүр үүсгэх

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

VueJs фреймворкийн шүүлтүүр ойлголтын тухай авч үзье. Хэрвээ та Angular фреймворкийг судалж байсан бол Pipe гэдэг ухагдхууныг мэдэх байх. VueJs фреймворкийн шүүлтүүр бол Pipe -тай ижил бөгөөд ямар нэгэн мөр эсхүл компонентийн хэв /шаблон/ дэх элементүүдийн харагдах байдлыг өөрчлөн үзүүлэх тусгай хувиргагч юм. Үүнийг дараах жишээн дээр авч

<template>
  <div>
      <h2>{{ title }}</h2> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue!"
    }
  }  
}
</script>

үзье.

CLI ямар хэрэгтэй вэ?

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

Хичээлээр Vue CLI гэж юу болох, юунд ашиглах, яагаад мэдэх хэрэгтэй тухай авч үзье. Vue CLI бол VueJS төслийг маш хурдан, эвтэйхэн байдлаар үүсгэн ашиглахад зориулагдсан хэрэгсэл. Бид өмнөх хичээлүүдэд html файлд VueJS санг оруулаад түүнийг ашиглаж болж байхад VueJS дээр бүтэн төсөл үүсгэх ямар шаардлагатай гэж бодож байж болно.

Цэс нээх хаах компонент

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

Програмийг удирдах цэсийг нээх болон хаах ажиллагааг хариуцах компонентийг боловсруулъя. Үүний тулд төслийн 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;

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

тэнцэл бишийг бод.

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

 
Бодлого 4.034

B(5;3) цэгт төгсгөлтэй AB вектор (3;1) гэсэн кординаттай бол A цэгийн абцисс, ординатын нийлбэрийг ол.

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

 
Бодлого 14.084

prob14_84_01 функцийн хязгаарыг ол.

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

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