Динамик хэвүүд /стилүүд/

Интернетэд сууриласан буюу хөтөч дээр ажилладаг програмуудын хэрэглэгчийн дэлгэцийг бүрэн удирдах боломжийг олгодог нь Javascript хэлний нэг давуу тал. Хэрэглэгч талын дэлгэцийг css хэвүүд ашиглан хэвжүүлдэг ч тэдгээрийг динамикаар удирдах хэрэгцээ зайлшгүй гардаг. Хичээлээр хуудасны элементүүдийн хэвийг css классууд ашиглахгүйгээр элементийн бичлэгт динамикаар оруулахыг CSS классуудтай ажиллах хичээлийнхтэй төстэй

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
        <style>
            .circle {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 1px solid black;
                display: inline-block;
                margin: 40px;
            }

            .red {background: red;}
            .blue {background: blue;}
            .green {background: green;}
        </style>
    </head>
    <body>
        <div id="app">
            <div class="circle" :style="{'background': color}"></div>
            <div class="circle"></div>
            <hr>
            <input type="text" v-model="color">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    isActive: false,
                    color: 'blue'
                }
            })
        </script>
    </body>
</html>

жишээн дээр авч үзье.

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

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

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

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

JavaScript-ийн өгөгдлийн төрлүүд

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

Төрөл Нэр Тодорхойлолт
Number Тоо 16, 10, 8 тооллын системийн бүхэл, бутархай тоонууд
String Мөр Хашилтанд байх тэмдэгтүүд
Boolean Логик True ба False байх логик утгууд
Function Функц Функцын холбоос
Object Обьект Обьект , массив болон Null утгатай хувьсагчид

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

Компонентийн төлвийн өөрчлөлтийг хийх setState арга ансинхрон ажиллагаатай тул төлвийн өөрчлөлтийг зөв хийж сурах хэрэгтэй. Үүнийг Фрагмент хичээлд үүсгэсэн

import React, { Component } from 'react'

export default class Counter extends Component {
  state = {
    counter: 0
  }
  addCounter = () => {
    this.setState({
      counter: this.state.counter + 1
    })
  }
  render() {
    return (
      <div>
        <h2>Тоолуур {this.state.counter}</h2>
        <button onClick={this.addCounter}>+</button>
        <button onClick={() => this.setState({ counter: this.state.counter - 1 })}>-</button>
      </div>
    )
  }
}

Counter компонентийн жишээн дээр авч үзье.

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

EcmaScript 6 -гийн зарим обьектуудад шинээр бий болсон аргуудын талаар хичээлд авч үзье.

Обьектыг өргөжүүлэх

Обьектын өргөжүүлэлтийг хийх аргыг

let obj1 = {a: 1};
let obj2 = {b: 2, c: 3};

обьектууд дээр авч үзье. obj1 -ийг obj2 -оор өргөжүүлье гэвэл ES6 -д бий болсон assign аргыг

Object.assign(obj1,obj2);

ашигладаг. Аргад эхний параметрээр өргөжих /target/ обьектыг харин хоёрдахь параметрээр өргөжүүлэх /source/ обьектыг өгнө. Дээрх командын дараа

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

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

Тоон дээр мөрийг нэмэх гэвэл яах вэ

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

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

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

 

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

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