Интерполяц

Хичээлээр Vue -гийн интерполяц гэж юу болох, түүний боломжийн талаар дэлгэрэнгүй авч үзнэ. Тухайлбал Энгийн Vue програм үүсгэх хичээлд үзсэн {{ name }} бүтцийн тухай бөгөөд үүнийг програмд хэрхэн ашиглах, ямар боломжуудтай, бүтцээр юу хийж болох тухай үзнэ. Энгийн Vue програм үүсгэх хичээлийн жишээтэй төстэй #app -элементэд Vue -гийн инициализацийг хийсэн app тодорхойлогчтой div -д мэндчилгээний текстийг үзүүлэх

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
    </head>
    <body>
        <div id="app">
            <h1>Hello {{ name }}</h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    name: 'Vue !!!'
                }
            })
        </script>        
    </body>
</html>

кодыг авч үзье.

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

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

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

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

Төлөв үүсгэх хичээлд App компонентийн бүх төлвүүдийг нэг дор state обьектод багцалсан. react -ийн төлвүүдтэй хэрхэн ажиллахыг харахын тулд App компонентод товч оруулаад түүн дээр дарахад h1 гарчигаар үзүүлэх текстийг солигдох ажиллагааг оруулъя. Үүний тулд App компонентийн кодод h1 гарчигийн доор

        <h1>
          {this.state.pageTitle}
        </h1>
        <button>Гарчиг өөрчлөх</button>
        <Car name={cars[0].name} year={cars[0].year} />

button тегээр Гарчиг өөрчлөх нэртэй товчийг нэмэн оруулаад хуудсаа харвал

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

Програмын бүтээгдхүүнүүд интернетэд суурилсан буюу хөтөч дээр ажиллах хандлага улам дэлгэрсээр байгаа нь  javascript хэлийг судлан эзэмших шаардлагыг улам нэмэгдүүлсээр байгаа. Хэлний боловсруулагчид javascript хэлний бичлэгийн дүрмийг өргөн тархсан програмчлалын хэлүүдтэй улам төстэй болгож байгааг ES6 -д классууд хэрхэн өөрчлөгдсөн дээр авч үзье. ES5 -д классыг хэрхэн үүсгэж байсанг

function Car(name) {
    this.name = name;
}

Car.prototype.logName = function () {
    console.log(this.name);
};

let car = new Car('Toyota');
car.logName();

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

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

Навигацийг /чиглүүлэгч/ үүсгэх хичээлээр үүсгэсэн цэснүүдээс шилжилт хийхэд сүүлд сонгогдсон цэс аль нь болохыг мэдэхэд хүндрэлтэй байгаа. Иймээс хуудасны идэвхитэй холбоосыг тэмдэглэх классыг хэрхэн оруулан ирэхийг авч үзье. Bootstrap -д сонгогодсон цэсийг тэмдэглэх active гэсэн класс байдгийг цэснүүдийн аль нэгэнд

        <ul class="navbar-nav">
          <li class="nav-item">
            <router-link class="nav-link" to="/">Home</router-link>
          </li>
          <li class="nav-item active">
            <router-link class="nav-link" :to="'/cars'">Cars</router-link>
          </li>
        </ul>

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

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

Javascript дээр бичигдсэн RxJs сан нь програмчлалыг рейктив /reactive/ аргачлалаар боловсруулахад зориулагдсан. RxJs санг ашиглан массив, мөрүүд, тоонууд, промис /promise/, үйл явцууд /event/ гэх мэтийн өгөгдлийн төрлүүдээс гадна дурын синхрон зүйлүүдтэй амархан харьцан ажиллах боломжтой. Стримүүдийг нэгтгэх I хичээлд RxJs санг ашиглан өөр стримүүдийг нэг стримд нэгтгэх аргуудтай танилцаж ба энэ хичээлээр аргуудыг үргэлжлүүлэн авч үзнэ.

concatMap арга

Арга mergeMap аргатай тун адилхан. Аргыг ажиллагааг

Rx.Observable.range(1, 5)
    .concatMap((x, i) => {
        return Rx.Observable.interval(100)
            .take(x)
            .map(c => i)
    })
    .subscribe(createSubscribe('concatMap'));

кодоос харцгаая.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

a ба b катеттай тэгш өнцөгт гурвалжин ерөнхий тэгш өнцөгтэй квадратыг багтаасан бол квадратын периметрийг ол.

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

 

функцийн графикийн (0,-1) цэгт татсан шүргэгч шулуун ба координатын тэнхлэгүүдээр хашигдсан мужийн талбайг ол.

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

 

тэнцэтгэл бишийн хамгийн их бүхэл шийдийг ол.

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