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

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 фреймворкийн үндсэн ойлголтууд багцаас үзээрэй.

Хичээлээр react компонентийн элементүүдийн хэвжүүлэлтэд хэрэг болох нэгэн аргачлалыг авч үзье. Тухайлбал элементийг inline -аар хэвжүүлэлтийн үед ашиглах техник юм. Иймээс Car компонентийн хэвжүүлэлтийн Car.css файлаас

.Car {
  margin-bottom: 10px;
  display: block;
  padding: 10px;
  border-radius: 5px;
}

border, box-shadow хэвүүдийг хасан тэдгээрийг Car компонентод inline -аар хэвжүүлэлтээр

  const style = {
    border: '1px solid #ccc',
    boxShadow: '0 4px 5px 0 rgba(0, 0, 0, .14)'
  }
  return (
    <div className="Car" style={style}>
      <h3>Машиний нэр: {props.name}</h3>
      <p>Он: <strong>{props.year}</strong></p>
      <input
        type="text"
        onChange={props.onChangeName}
        value={props.name}
        className={inputClasses.join(' ')}
      />
      <button onClick={props.onDelete}>Устгах</button>
    </div>
  )

style хувьсагчид тодорхойлоод Car компонентийг багцалж буй div -ийн style атрибутад дамжуулах болгон өөрчилье.

Хичээлээр ES6 -гийн кодыг ES5 кодоор компиляц хийх талаар авч үзье. Юуны түрүүнд үүнийг ямар учраас хийх хэрэгтэй вэ? гэдгийг тайлбарлая. ES бол EcmaScript -ийн хураангуйлсан бичлэг бөгөөд 6 нь Javascript -ийн хувилбарын дугаар. ES6 гараад удаагүй байгаа ч түүнийг олон хөтөчүүд дэмжин ажилладаг болоод байгаа. Жишээ нь Chrome хөтөч ES6 дээр бичигдсэн кодыг шууд ажиллуулна. Гэвч олон хэрэглэгчид ES6 -г шууд дэмждэггүй хуучин хөтөчүүдийг жишээ нь Internet Explorer, Firefox -ийн хуучин хувилбарыг хэрэглэсээр байгаа. Харин эдгээр хуучин хөтөчүүд ES5 -ийг бүрэн дэмжин ажилладаг тул програмыг бүх хэрэглэгчид ямар нэгэн асуудалгүйгээр ашиглах боломжийг бүрдүүлэх зорилгоор ES6 -гийн кодыг ES5 кодоор компиляц хийх хэрэгцээ бий.

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