Параметр дамжуулах

Чиглүүлэгч буюу url хаягт ямар параметрүүдийг дамжуулж болохыг үзье. Давхар чиглүүлэгчид хичээлд машины тухай дэлгэрэнгүй мэдээллийг

гэж харуулсан. Өөрөөр хэлбэл ямарч машиныг мэдээллийг CarFull компонентод шууд заасан байгаа.

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

how_to_regБүртгүүлэх

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

Холбоотой материалууд
Аргад параметрүүд дамжуулах

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

Хичээлээр үйл явцын талаар дэлгэрүүлэн авч үзье. Үүний тулд Үйл явдал нэмэх хичээлийн кодыг нэг тоолууртай түүнийг нэмэгдүүлэх нэг товчтой болгон

    <body>
        <div id="app">
            <h2>Тоолуур = {{ counter }}</h2>
            <button v-on:click="addCounter">Нэмэгдүүлэх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    counter: 0
                },
                methods: {
                    addCounter: function() {
                        this.counter++
                    }
                }
            })
        </script>
    </body>

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

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

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

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

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

Үйл явдал (events) – гэдэг нь хэрэглэгчийн үйлдлийн үр дүнд хуудас болон цонхны байдалд гарсан өөрчлөлтийг мэдэгдэхийг хэлнэ. Хэрэглэгч хуудастай ажиилах явцад эсвэл  хуудасны төлөвт өөрчлөлт гарах үед үйл явдал буюу event үүснэ. Энэ нь хулганыг хөдөлгөх, хулганы товч дээр дарах, гараас текст оруулах зэрэг байж болно. Хуудасны төлөвт өөрчлөлт гарах гэдэгт хуудас, обьект эсвэл зураг ачааллах, хуудас дээр алдаа гарах, нэг элементээс нөгөө элементэд фокус шилжих гэх мэт байж болно.

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

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

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас хооронд динамик буюу дахин ачаалахгүйгээр шилжилт хийх боломжийг бүрдүүлсэн. App компонентийн кодод бүртгүүлсэн

function App() {
  return (
    <div>
      <nav className="nav">
        <ul>
          <li>
            <Link to="/">Нүүр</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <hr />
      <Routes>
        <Route path="/" element={<Cars />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

/ чиглүүлэгч манай нүүр хуудас буюу http://localhost:3000/ хаягийг зааж байгаа ч Cars компонентод шилжиж байгаа нь логикийн талаасаа ойлгомж муутай болсон. Иймээс кодийг / чиглүүлэгчээр нүүр хуудаст шилждэг болгоё.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

задаргааны хамгийн их нэмэгдхүүн бол a, b, c -г ол.

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

 
Бодлого 7.075

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

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

 
Бодлого 15.071

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

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

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