Хувьсагчид

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 файлын компиляцийг хийх гээд үзье.

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

how_to_regБүртгүүлэх

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

Холбоотой материалууд
Компонентод параметр дамжуулах

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

Өмнөх хичээлүүдэд бид react -ийг нилээд сайн судлан энгийн төслийг үүсгэн ажлуулж сурсан. Одоо react компонентуудийн талаар цааш гүнзгийрүүлэн судлах цаг болсон. Хичээлээр Component классаас удамшсан класс хэлбэрээр үүсгэгдсэн компонентод параметр дамжуулахыг авч үзье. Үүнийг төслийн App компонент дээр харцгаая. App компонентийг index.js файлд

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM сангийн render аргаар DOM -д оруулан өгч байгаа.

Функцийг параметр байдлаар дамжуулах

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

Хичээлээр компонент хоорондын харилцан ажиллагааны бас нэгэн аргыг авч үзье. Доод шатны /хүүхэд/ компонентоос параметр дамжуулах хичээлд бид хүүхэд компонентод үйл явц үүсгээд түүнийг эцэг компонентод сонсохыг сурсан. Өөрөөр хэлбэл эцэг компонентод тодорхойлогдсон талбарын утгыг хүүхэд компонентоос өөрчилсөн. Үүнийг хийх бас нэгэн арга бий. Жишээ нь App компонентод

<script>
import Car from './components/Car.vue'

export default {
  data () {
    return {
      carName: 'Toyota',
      carYear: 2018
    }
  },
  methods: {
    changeCarName() {
      this.carName = 'Benz'
    }
  },
  components: {
    appCar: Car
  }
}
</script>
Input талбарын боловсруулалт

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

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

Өмнөх хичээлүүдэд хуудасны элементүүдэд үйл явцын сонсогчийг тавин, түүнд параметр дамжуулан хүлээн авах аргуудыг сурсан. Энэ хичээлээр Input талбарт үүссэн үйл явцыг хэрхэн боловсруулахыг судлая. Үүний тулд App компонентийн h1 гарчигийн доор input талбарыг

      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>
        <input type="text"/>
        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>

оруулан өгөөд хөтөч дээрх хуудсаа харвал

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

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

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

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

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

үзье.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

функцийн тодорхойлогдох мужийг ол.

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

 
Бодлого 6.052

Арифметик прогресын 3-р гишүүн 5, 7-р гишүүн 13 бол эхний 10 гишүүний нийлбэрийг ол.

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

 
Бодлого 3.134

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

Жич: Тэгшитгэлийг заавал бодох гээд үзээрэй. Иймэрхүү бодлого ЭЕШ -д бараг ирэхгүй ч математикийг ганцхан ЭЕШ -аар хязгаарлавал та өөрийгөө хөгжүүлэхээ боомилсонтой адил.

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

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