Энгийн үйлдлүүд

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

of арга.

Функцийн боломжийг судлахын тулд index.js файлд доорх кодыг оруулан өгье.

Rx.Observable.of(5)
    .subscribe(
        (x) => console.log('Next :', x),
        (err) => console.log('Error :', err),
        () => console.log('Completed')
    );

Дээрх код бидний өмнөх хичээлд үзсэнтэй төстэй боловч энэ удаа Observable классын of аргаар 5 гэсэн тооноос стрим үүсгэж байгаа. Кодын ажиллагааг шалгахын тулд index.html файлыг хөтөч дээр нээгээд консолын цонхыг харвал

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

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

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

Холбоотой материалууд
Компонентууд ямар хэрэгтэй вэ?

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

Програмын төслийг боловсруулахдаа системийн ажиллагааг бие даасан, бие биеэсээ үл хамаарах хэсгүүдэд хуваан хэсэгчлэн кодлон тестлэхийг сайн практик гэж үздэг. Vuejs санд энэ аргачлалыг хэрэгжүүлэх суурь технологи бол компонент юм. Ер нь Vue -гийн төсөл төрөл бүрийн компонентуудаас бүрддэг тул хичээлийн материалыг сайтар судлан ойлгон авахыг хичээгээрэй. Хичээлээр компонент гэж юу болох, ямар хэрэгтэй гээд компоненттой холбоотой асуудлуудыг авч үзье. Асуудлыг энгийнгээс эхлэн ойлгох үүднээс

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Компонент</title>
    </head>
    <body>
        <div id="app">

        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
            })
        </script>        
    </body>
</html>

агуулга бүхий html файлыг авч үзье. Файлд app айдитай div блок түүнтэй холбосон Vue -гийн хувийг үүсгэсэн кодыг бид өмнөх хэсгээс мэднэ. 

Input талбарын боловсруулалт

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

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

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

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

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

Асуултын мэдээлэл

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

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

r_06_05_02

байдлаар харагдах болсон.

CheckBox

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

Интернетэд сууриласан програмчлал хөгжихийн хирээр хэрэглэгчдийн шаардлага улам өндөр болсон. Хөтөч сервер хооронд хуудсыг дамжуулан дахин зурах, формын шалгалт, хуудас шилжилт зэрэг серверт олон удаа хандах ажиллагаануудад хэрэглэгчид нилээд дургүй байдаг. Эдгээр асуудлыг шийдэхийн тулд SPA буюу нэг хуудаст програмын технологийг Angular, React, Vue зэрэг фреймворкууд хэрэгжүүлдэг. Фреймворкуудийн ажиллагааны зарчим ойролцоо тул аль нэгийг нь судалсан байхад бусад нь ойлгомжтой. Иймээс сайтад Vue фреймворкийн хичээлүүдийг оруулж байгаа билээ.

Энэ удаад Html хуудас дээрх сонголтуудаас тохирохыг нь зөвлөх тэмдэглэгээ хийдэг CheckBox гэж нэрлэдэг элементийн тухай авч үзье. Жишээ нь бүртгэлийн хуудаст хэрэглэгчийн сонирхдог зүйлсийг тодорхой төрлүүдээс сонгох байдлаар ихээр авдаг. Үүнийг VueJs -дээр хэрхэн хэрэгжүүлэхийг

<template>
  <div>
    <h2>Form inputs</h2> 
    <label>
      <input type="checkbox"> instagram
    </label>
    <label>
      <input type="checkbox"> twitter
    </label>    
    <label>
      <input type="checkbox"> facebook
    </label>    
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

жишээгээр харцгаая.

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

тэнцэтгэл биш хэдэн бүхэл тоон шийдтэй вэ?

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

 
Бодлого 3.047

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

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

 
Бодлого 6.064

b1=3, bn=96, Sn=189 геометр прогресийн 8-р гишүүнийг ол.

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

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